昨天在學習寫react的時候看到了學長寫的關(guān)于本地儲存的一些函數(shù)及舍，對于我這個互聯(lián)網(wǎng)小白來說感覺又長知識啦 ６叩怠砌左！所以又上網(wǎng)搜了一些相關(guān)資料然后把自己覺得有用的東西記錄了下來拉背，第一篇文章啊哇咔咔师崎，希望可以獲得進步，加油~~~
概述
localStorage和sessionStorage,他們使得網(wǎng)頁可以在瀏覽器端儲備數(shù)據(jù)
sessionStorage保存的數(shù)據(jù)通常是在瀏覽器窗口關(guān)閉的時候就被清空localStorage儲存的數(shù)據(jù)長期存在椅棺，下次再訪問該網(wǎng)站時犁罩，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)
這兩個對象除了保存數(shù)據(jù)的期限長短不同齐蔽，其余的屬性和方法完全一致
確定瀏覽器是否支持
檢查window對象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個對象
// localStorage
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
// sessionStorage
if(window.sessionStorage){
alert('This browser supports sessionStorage');
}else{
alert('This browser does NOT support sessionStorage');
}
操作方法
sessionStorage和localStorage保存的數(shù)據(jù)床估，都以“鍵值對”的形式存在
存入數(shù)據(jù)
存入數(shù)據(jù)用setItem方法含滴。它接受兩個參數(shù)，第一個是鍵名丐巫，第二個是保存的數(shù)據(jù)谈况。
sessionStorage.setItem('key', 'value');
localStorage.setTime('key', 'value');
讀取數(shù)據(jù)
讀取數(shù)據(jù)使用getItem方法。它只有一個參數(shù)递胧，就是鍵名碑韵。
var valueSession = sessionStorage.getItem('key');
var valueLocal = localStorage.getItem('key');
清除數(shù)據(jù)
removeItem方法用于清除某個鍵名對應(yīng)的數(shù)據(jù)。
sessionStorage.removeItem('key');
localStorage.removeItem('key');
clear方法用于清除所有保存的數(shù)據(jù)缎脾。
sessionStorage.clear();
localStorage.clear();
遍歷所有的鍵
利用length屬性和key方法泼诱，可以遍歷所有的鍵。
for (var i = 0; i < localStorage.length; i++) {
console.log(localStorage.key(i));
}
其中的key方法赊锚，根據(jù)位置（從0開始）獲得鍵值治筒。
storage事件
當儲存的數(shù)據(jù)發(fā)生變化時，會觸發(fā)storage事件舷蒲。我們可以指定這個事件的回調(diào)函數(shù)耸袜。
window.addEventListener('storage', onStorageChange);
回調(diào)函數(shù)接受一個event對象作為參數(shù)。這個event對象的key屬性牲平，保存發(fā)生變化的鍵名堤框。
function onStorageChange(e) {
console.log(e.key);
}
除了key屬性，event對象的屬性還有三個：
oldValue：更新前的值纵柿。如果該鍵為新增加蜈抓，則這個屬性為null。
newValue：更新后的值昂儒。如果該鍵被刪除沟使，則這個屬性為null。
url：原始觸發(fā)storage事件的那個網(wǎng)頁的網(wǎng)址渊跋。
值得特別注意的是腊嗡，該事件不在導(dǎo)致數(shù)據(jù)變化的當前頁面觸發(fā)。如果瀏覽器同時打開一個域名下面的多個頁面拾酝，當其中一個頁面改變sessionStorage或localStorage的數(shù)據(jù)時燕少，其他所有頁面的storage事件會被觸發(fā)，而原始頁面并不觸發(fā)storage事件蒿囤】兔牵可以通過這種機制，實現(xiàn)多個窗口之間的通信。所有瀏覽器之中底挫，只有IE瀏覽器除外嗽桩，它會在所有頁面觸發(fā)storage事件。
