最近的業(yè)務(wù)處理上，要使用cookie緩存儲(chǔ)一下數(shù)據(jù)，公司的cookie還搞出點(diǎn)問(wèn)題。而用戶的瀏覽器都是利用微信的內(nèi)置，普遍支持h5的本地存儲(chǔ)。于是利用了這個(gè)...
現(xiàn)代瀏覽器普遍開(kāi)始支持H5本地存儲(chǔ)，localStorage、sessionStorage。可以用來(lái)代替cookie的一部分存儲(chǔ)功能，他比cookie存儲(chǔ)量更大。比較實(shí)用。
兩者用法類似。localStorage存儲(chǔ)，如果不清除那么一直存在；sessionStorage是在一個(gè)會(huì)話級(jí)別上存在，如果會(huì)話關(guān)閉，那么就沒(méi)了。顧名思義吧。
他們存值都是以鍵值對(duì)形式存在，值也是存入字符串類型（如果是對(duì)象，就序列化以后再存入）。幾乎和memcached，redis這種一樣。很好理解。
以下簡(jiǎn)單演示下增刪改查的用法
<script type="text/javascript">
if(window.sessionStorage){
alert('ok');
}else{
alert('fail');
}
// 設(shè)置值
sessionStorage.setItem('key_a', 1);
// 取值
var key_a = sessionStorage.getItem('key_a');
console.log(key_a);
// 刪除
sessionStorage.removeItem('key_a');
console.log(sessionStorage.getItem('key_a'));// null
sessionStorage.setItem('key_b', 1);
sessionStorage.setItem('key_c', 2);
// 清除所有鍵值
sessionStorage.clear();
console.log(sessionStorage.key_b);
console.log(sessionStorage.key_c);
console.log('==================');
// 設(shè)置值和取值也可以使用.符號(hào)，類似于取對(duì)象屬性
// 設(shè)置值
sessionStorage.key_d = 12;
// 取值
var key_d = sessionStorage.key_d;
console.log(key_d);
// 有個(gè)小區(qū)別，如果這個(gè)key沒(méi)有了。一個(gè)返回值undefined，一個(gè)是null
console.log(sessionStorage.key_null);// undefined
console.log(sessionStorage.getItem('key_null'));// null
console.log('==========簡(jiǎn)單演示一個(gè)存放對(duì)象的例子========');
var obj = {
a : 12,
b : [1,2,3,4,5],
c : {
x : 'a',
y : ['bb', 12, 'cc', {a:1,b:2}],
z : 1333
}
};
sessionStorage.setItem('page', JSON.stringify(obj));
// 取值
var page = JSON.parse(sessionStorage.getItem('page'));
console.log(page);
// 遍歷下數(shù)組
for(var i=0;i< page.b.length;i++){
console.log(page.b[i]);
}
// 遍歷對(duì)象，通常用in
for(var j in page.c){
console.log(page.c[j])
}
// 刪除key
sessionStorage.removeItem('page');
</script>
