HTML5客戶端數據存儲WebStorage—localStorage與sessionStorage

來源：懂視網責編：小采時間：2020-11-27 15:12:29

HTML5客戶端數據存儲WebStorage—localStorage與sessionStorage

HTML5客戶端數據存儲WebStorage—localStorage與sessionStorage:HTML5提供了在客戶端存儲數據的新方法Web Storage 類似于HTML4中的Cookie 不過它要強大的多Cookie先來簡單復習一下之前使用的cookiecookie存儲數據到用戶設備上，存儲的數據量較小只有4KB 可以通過navigator.cookieEnabled檢測是否開啟了

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5客戶端數據存儲WebStorage—localStorage與sessionStorage:HTML5提供了在客戶端存儲數據的新方法Web Storage 類似于HTML4中的Cookie 不過它要強大的多Cookie先來簡單復習一下之前使用的cookiecookie存儲數據到用戶設備上，存儲的數據量較小只有4KB 可以通過navigator.cookieEnabled檢測是否開啟了

HTML5提供了在客戶端存儲數據的新方法Web Storage
類似于HTML4中的Cookie
不過它要強大的多

Cookie

先來簡單復習一下之前使用的cookie

cookie存儲數據到用戶設備上，存儲的數據量較小只有4KB
可以通過navigator.cookieEnabled檢測是否開啟了cookie

設置cookie document.cookie = 'key=value';

獲取cookie document.cookie;

刪除cookie document.cookie = "key=value;max-age=0";

設置max-age存儲期限 document.cookie = "key=value;max-age=1000"; // 1000秒

設置expires存儲期限

var timestamp = (new Date()).getTime() + 10000;var expires = new Date(timestamp).toGMTString();
//或toUTCStringdocument.cookie = "key=value;expires="+expires;

獲取具體cookie值

function getCookie(name) {
 var name = name + "="; 
 var ary = document.cookie.split(';'); 
 for(var i = 0; i < ary.length; i++){ 
 var c = ary[i]; 
 while (c.charAt(0) == ' '){
 c = c.substring(1);
 } 
 if (c.indexOf(name) != -1){ 
 return c.substring(name.length, c.length);
 }
 } return "";
}

Web Storage

Web Storage又分為兩種
localStorage和sessionStorage
它們的區別是：

localStorage存儲的是永久數據，除非手動刪除

sessionStorage存儲的是臨時數據，窗口關閉就會消失

簡單使用

Web Storage只能存儲字符串數據
我覺得可以把它們理解為JSON
使用方法都是類似的，已localStorage為例

localStorage.name = 'payen';
localStorage.info = JSON.stringify({name: 'payen', age: 20});
console.log(localStorage.name);
console.log(JSON.parse(localStorage.info));

要存儲的數據名就是localStorage的屬性名
普通的字符串正常存儲就可以了
對象數據可以利用JSON.stringify()將其轉換為字符串格式
使用的時候再用JSON.parse()轉換回對象格式
（如果直接存儲對象的話，它會被強制轉換為字符串 “[object Object]”）

刪除數據直接delete就好

delete localStorage.name;delete localStorage.info;

如果不刪除的話，localStorage里面的數據就會一直存在于你的瀏覽器了

API

localStorage和sessionStorage還提供了簡單的API
類似于一個客戶端的數據庫
（API都是相同的）
常用的有以下幾個：

保存數據 setItem(key,value)

讀取數據 getItem(key)

刪除單個數據 removeItem(key)

清空全部數據 clearItem()

獲取數據索引 key(index)

實例

通過這個，我們可以寫個簡易的通訊錄

<p id="container">
 <br>
 <label for="username">姓名：</label>
 <input type="text" id="username" name="username">
 <br>
 <label for="mobilephone">手機：</label>
 <input type="text" id="mobilephone" name="mobilephone">
 <br><br>
 <input type="button" onclick="add()" id="add" value="增加聯系人">
 <br><br>
 <hr>
 <label for="search">輸入姓名：</label>
 <input type="text" id="search" name="search">
 <br><br>
 <input type="button" onclick="find()" id="find" value="查找手機號">
 <p id="result"><br></p></p>

#container { 
border: 2px solid gray; 
width: 320px; 
text-align:center;}

通訊錄-1

JavaScript中就是實現這兩個函數

var user = document.getElementById('username'),
 phone = document.getElementById('mobilephone'),
 search = document.getElementById('search'),
 result = document.getElementById('result');var add = function(){
 var u = user.value,
 p = phone.value,
 l = localStorage.length; if(u !== '' && p !== ''){
 localStorage.setItem(u, p);
 user.value = '';
 phone.value = '';
 alert('添加成功');
 }
};var find = function(){
 var s = search.value,
 r = localStorage.getItem(s); if(s !== '' && r){
 result.innerHTML = r;
 }
};

通訊錄-2

輸入姓名和手機添加聯系人
然后在下面輸入聯系人姓名我們可以查找到手機號

通訊錄-3

當然這個通訊錄十分簡易了
也可以為它添加顯示通訊錄全部信息
刪除聯系人功能等等

cookie與Web Storage區別

最后說說Html5的Web Storage和Html4的cookie的區別

特點	Cookie	Web Storage
生命周期	一般由服務器生成并設置時間；瀏覽器生成默認關閉瀏覽器失效	local：不清除則永久保存；session：關閉頁面或瀏覽器失效
數據大小	4KB	官方推薦5MB
通信	攜帶在HTTP頭中（過多使用有性能問題）	僅在瀏覽器存儲，不參與通信
使用	原生接口不友好，需要手動封裝	原生接口友好