HTML5(三)——Web 本地存儲(chǔ)

時(shí)間：2023-05-29 18:39:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-29 18:39:01 來源：網(wǎng)站運(yùn)營

HTML5(三)——Web 本地存儲(chǔ)：WebStorage的目的是克服由cookie所帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí)，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。

WebStorage兩個(gè)主要目標(biāo)：

（1）提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。

（2）提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。

web存儲(chǔ)更加安全與快速，這些數(shù)據(jù)還不會(huì)保存到服務(wù)器，還可以存儲(chǔ)大量數(shù)據(jù)而不影響網(wǎng)站性能。

web 存儲(chǔ)類型

1. localStorage - 用于長久保存數(shù)據(jù)，沒有有效期，直到手動(dòng)清除。
2. sessionStorage - 臨時(shí)保存當(dāng)前窗口的數(shù)據(jù)，窗口關(guān)閉之后自動(dòng)清除。

不管是 localStorage 還是 sessionStorage 使用方法都是一樣的語法，對常見操作語法進(jìn)行示范。以下就以localStorage為例：

常見操作語法：

• 保存數(shù)據(jù)：

localStorage.key = value

localStorage.setItem(key,value)

• 獲取數(shù)據(jù)

localStorage.key

localStorage.getItem(key)

• 刪除單個(gè)數(shù)據(jù)：

localStorage.removeItem(key)

delete localStorage.key

• 刪除全部：localStorage.clear()
• 獲取某個(gè)索引的鍵值：localStorage.key(index)

數(shù)據(jù)都是以鍵值對形式存在的，操作的時(shí)候與json有點(diǎn)類似。

web存儲(chǔ)數(shù)據(jù)應(yīng)用

應(yīng)用1：取出本地存儲(chǔ)的所有數(shù)據(jù)，以localStorage為例。

localStorage和sessionStorage是兩個(gè)對象，類似json?？杀闅v取出數(shù)據(jù)，如：

localStorage.user = "倩倩"localStorage.age = "18"localStorage.job = "打雜"console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}for(key in localStorage){ console.log(`${key}--${localStorage[key]}`)}運(yùn)行程序之后，結(jié)果如圖：







我們發(fā)現(xiàn)遍歷的時(shí)候把localStorage的屬性和方法全部打印出來了，而我們需要的只是我們存儲(chǔ)的三個(gè)數(shù)據(jù)，其余的都不要，此時(shí)我們換個(gè)方法。

localStorage.user = "倩倩"localStorage.age = "18"localStorage.job = "打雜"console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}for(let i=0;i<localStorage.length;i++){ let key = localStorage.key(i) console.log(`${key}:${localStorage[key]}`)}此時(shí)運(yùn)行結(jié)果就是我們需要的結(jié)果了！

記住用戶登錄信息、存草稿、存郵件等經(jīng)常會(huì)使用 localStorage，我們介紹下幾種存儲(chǔ)方式的區(qū)別，可以更好地根據(jù)需求選擇存儲(chǔ)方式。

幾種存儲(chǔ)方式區(qū)別

cookies 和 sessionStorage、localStorage區(qū)別如圖：

上述看三者存儲(chǔ)大小有很大差異，存儲(chǔ)內(nèi)容上也不同，cookie只能保存字符串類型，但sessionStorage和localStorage能夠支持任何類型的對象存儲(chǔ)。如果保存復(fù)雜json數(shù)據(jù)時(shí)，可以轉(zhuǎn)成字符串保存，取出時(shí)通過JSON.parse()轉(zhuǎn)成json格式。

安全性方面，web 存儲(chǔ)不會(huì)發(fā)送到服務(wù)器端，不用擔(dān)心被截獲，所以相對cookie安全些。

實(shí)例：網(wǎng)頁中寫信，自動(dòng)保存草稿，網(wǎng)頁關(guān)閉重新打開之后數(shù)據(jù)依舊存在。

<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea><script> function save(){ var x = document.getElementById("email") localStorage.setItem('email',x.value) } window.onload =function(){ var x = document.getElementById("email") x.value = localStorage.getItem("email") }</script>注意：如果你是直接使用瀏覽器打開html文件，此時(shí)發(fā)現(xiàn)并不會(huì)存儲(chǔ)，需要聲明下存儲(chǔ)是針對域的，所以我們需要放到服務(wù)內(nèi)，服務(wù)內(nèi)訪問才可以進(jìn)行緩存。

需要的同學(xué)自己去下載個(gè)nginx。