JS/JQ基于localStorage的本地數(shù)據(jù)儲存指南
網(wǎng)上單獨講解localStorage的內(nèi)容很多，但是成套運作的比較少，本篇文章作為學(xué)習(xí)記錄也給與我同樣非專業(yè)出身的自學(xué)者們一條快速通道。
文章將分為以下幾個部分：
邏輯結(jié)構(gòu)
基礎(chǔ)講解
創(chuàng)建一個完整的操作鏈
邏輯結(jié)構(gòu)
用戶訪問 → JS/JQ判斷是否存在localStorage數(shù)據(jù)
????????????????????→ 存在 ? →讀取 → 數(shù)據(jù)序列還原 → 應(yīng)用到當(dāng)前頁面
????????????????????→ 不存在 →結(jié)束
編輯內(nèi)容 → JS/JQ 識別主動/被動儲存操作
????????????????????→ 獲取存儲目標(biāo)對象 → 數(shù)據(jù)序列化處理 → 存儲localStorage數(shù)據(jù)
實例文件下載可以去github ：https://github.com/kumame/Tools/tree/main/fsnm
我之前寫的那個 論壇風(fēng)格小說編輯器 ，主要運行代碼都在app.js里面，寫的還挺規(guī)整的可讀性應(yīng)該沒問題。
基礎(chǔ)講解
????????localStorage的本地數(shù)據(jù)儲存基于相同域名，也就是說不管你有多少單獨頁面，只要域名是同一個那么所有數(shù)據(jù)都會儲存在這個名下，因此多數(shù)據(jù)頁面時需要注意存儲的命名規(guī)范。
????????實際上語言上我更推薦JQ，主要是簡潔明了減少了很多操作。當(dāng)然，不論是JS還是JQ在執(zhí)行邏輯上是一樣的。
????????localStorage儲存的時候需要兩個數(shù)據(jù)：?鍵(key)?和?值(value)，簡單理解就是標(biāo)題和內(nèi)容。在讀取時根據(jù)?鍵(key)?獲得對應(yīng)的?值(value)?返回給頁面。
?????因此是否存在對應(yīng)數(shù)據(jù)依靠的是查找鍵(key)，數(shù)據(jù)量較少的情況下實際上使用if(localStorage.key)就可以快速判斷了，較多的時候可以使用localStorage.hasOwnProperty(‘key’)進(jìn)行數(shù)組篩選，后者會返回布爾值也就是true/false。
?
????????在使用localStorage數(shù)據(jù)時，值(value)會作為字符串直接使用，因此如果你是多數(shù)據(jù)數(shù)組的話使用的時候得進(jìn)行一次拆分操作。
? 用JQ來示范給input填充單一保存信息：$("#id").val(localStorage.key)
? ? ? ? 創(chuàng)建存儲數(shù)據(jù)也非常的簡單，localStorage.key=目標(biāo)數(shù)據(jù)，這里的localStorage.key就和var賦值是一樣的。
?
????????清除localStorage數(shù)據(jù)有兩個方式：
清除域名下的所有數(shù)據(jù)?localStorage.clear()
清除指定鍵(key)的數(shù)據(jù)?localStorage.removeItem("key")
創(chuàng)建一個完整的操作鏈
確定你需要儲存的有些哪些數(shù)據(jù)，并進(jìn)行ID規(guī)范命名以便之后獲取。
設(shè)置觸發(fā)儲存function函數(shù)：
?????函數(shù)中獲取你需要的所有數(shù)據(jù)并設(shè)置key名儲存；
?????數(shù)量較少的情況可以分別儲存單獨的key；
?????數(shù)據(jù)量較多的時候可以創(chuàng)建一個數(shù)組?new?Array() 將所有數(shù)據(jù)對應(yīng)數(shù)組序號。
? ? ?若獲取的數(shù)據(jù)中有多選(checkbox)的情況，可以使用.each(function())直接輸出數(shù)組。或者先使用for獲取循環(huán)，判定.checked狀態(tài)的數(shù)據(jù)輸出，并在輸出結(jié)果的時候加上分割符號，再使用.?replace()替換掉多余的分隔符號避免空數(shù)據(jù)。該部分儲存的數(shù)據(jù)最好為獲取對象的ID方便之后恢復(fù)時候定位。設(shè)置自動保存function函數(shù)，觸發(fā)的是2儲存函數(shù)；
如果有鍵盤快捷鍵儲存的需求，觸發(fā)的也是2儲存函數(shù)；
鑒于操作反饋，可以添加一個不影響連續(xù)操作的保存提示；
設(shè)置套用數(shù)據(jù)function函數(shù)：
????單一數(shù)據(jù)可以直接套用，多數(shù)據(jù)作為數(shù)組儲存的情況下先還原數(shù)組?var?list?=?localStorage.key.split(",")，按照儲存時候的序列順序?qū)?yīng)套用即可。
????數(shù)組連環(huán)套的情況下可以直接用for循環(huán)拆解并輸出。設(shè)置讀取數(shù)據(jù)的function函數(shù)：
????可以使用html標(biāo)簽?onload=“讀取函數(shù)()”，也可以使用別的加載方法，哪個方便用哪個便可。
????讀取數(shù)據(jù)可以設(shè)置為：主動 -?打開頁面即刻獲取并填充；手動 –?獲取后出現(xiàn)提示操作讓使用者選擇是否填充。依需求設(shè)置是否允許使用者主動清理緩存。
代碼意思意思一下的演示：
//讀取數(shù)據(jù)
function load(){
????if(localStorage.key) $("#ID").css("display","block");//激活隱藏的手動觸發(fā)提示
????if(localStorage.key) $("#ID") $("#ID").val(window.localStorage.ke);//識別后自動填充
}
//使用數(shù)據(jù) – 基于手動操作或是處理量較多的數(shù)據(jù)
$("#insert").click(function(){
重組數(shù)據(jù)后并應(yīng)用的一些里操作
});
//清理數(shù)據(jù)
$("# clear").click(function(){
window.localStorage.removeItem("key");?//針對單一數(shù)據(jù)清理
localStorage.clear();?//清理所有，同站點多頁面數(shù)據(jù)時慎用
});
//儲存數(shù)據(jù)
JQ("#save").click(function(){
獲取并處理需要儲存的數(shù)據(jù)
Var detail = ‘’;//賦值主要用于數(shù)組，單一可以直接執(zhí)行下面的 = 獲取命令；
localStorage.key = detail;
$("#tip").text('數(shù)據(jù)緩存于 '+new Date().toLocaleTimeString('en-US',{hour12:false}));//保存后于特定區(qū)域提示
});
//自動保存
var autosave = window.setInterval(function(){$('#save').click()},60000 );
這里的數(shù)字為毫秒計算，因此是60秒。
//鍵盤監(jiān)聽 Ctrl+S
function keyDown(e){
currKey = e.keyCode||e.which||e.charCode;
if(currKey == 83 && (e.ctrlKey||e.metaKey)){
$('#save').click();
return false;
}
}
document.onkeydown = keyDown;
