首頁(yè) 猿問想問下在Chrome擴(kuò)展中使用Ch...

想問下在Chrome擴(kuò)展中使用Chrome提供的存儲(chǔ)API可以實(shí)現(xiàn)表單存儲(chǔ)嗎？

JavaScript

搖曳的薔薇 2019-03-06 15:50:09

大家，想要對(duì)用戶輸入的表單數(shù)據(jù)在瀏覽器端存儲(chǔ)，用什么方法比較好啊？安全問題暫不考慮，沒有任何敏感數(shù)據(jù)的。嘗試了使用Chrome localstorage API，但是沒有成功。再詳細(xì)說(shuō)一下要實(shí)現(xiàn)的功能：在擴(kuò)展中有2-3個(gè)輸入框，對(duì)于用戶多次在這些輸入框中輸入的不同的文本內(nèi)容進(jìn)行存儲(chǔ)并且顯示在擴(kuò)展中?？赡苷f(shuō)的不太準(zhǔn)確，我再詳細(xì)說(shuō)一下我的需求：有3個(gè)輸入框，這三個(gè)輸入框?yàn)橐唤M數(shù)據(jù)，用戶提交一次后會(huì)將數(shù)據(jù)保存在本地并且實(shí)時(shí)顯示在瀏覽器中，用戶第二次輸入數(shù)據(jù)并提交的時(shí)候是添加一組數(shù)據(jù)而不是更新上一組數(shù)據(jù)。謝謝關(guān)注者。。。

查看完整描述

2 回答

拉丁的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

直接給你段代碼好了，自己看看改改

var strKey = "content_{{$question->id}}";

var storage = window.localStorage;

var docAnswer = document.getElementById("answer_editor_content");

if(docAnswer){

//再次打開頁(yè)面時(shí)嘗試賦值

if(docAnswer.value == "" && storage.getItem(strKey)!=null){

$("#answer_editor_content").val(storage.getItem(strKey));

$("#answer_editor").html(storage.getItem(strKey));

}

//定時(shí)保存

setInterval("cacheContent()",1000);

}

function cacheContent(){

var strValue = document.getElementById("answer_editor_content").value;

if (storage && strValue != '') {

storage.setItem(strKey, strValue);

}

反對(duì) 回復(fù) 2019-03-09

開心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

如果是寫chrome擴(kuò)展的話，可以使用storage這個(gè)api，會(huì)自動(dòng)同步云端（如果你連接了谷歌服務(wù)器），否則和localstorage是一樣的，可直接存儲(chǔ)數(shù)組或?qū)ο蟆?/p>

具體使用

chrome.storage.sync.set({ 'key': vlaue }, function() {

console.log(' saved success');

});

value可以為字符串，數(shù)組，對(duì)象，使用這個(gè)api需要在manifest.json中添加"storage"這個(gè)權(quán)限

如果是使用普通的sessionStorage或localStorage，存儲(chǔ)復(fù)雜對(duì)象，可以把對(duì)象或數(shù)組用JSON.stringfy轉(zhuǎn)成字符串來(lái)存儲(chǔ)，使用的時(shí)候用JSON.parse來(lái)解析成原來(lái)的格式。

希望能對(duì)你有所幫助。

反對(duì) 回復(fù) 2019-03-09