瀏覽器端的資料儲存，也就是Web Storage的用法

Storage例項物件一共有兩個（全域性物件）：localStorage，sessionStorage，因為是全域性物件，所以可以通過winow.localStorage和window.sessionStorage來訪問

• localStorage：功能和sessionStorage相同，但是瀏覽器關閉，然後重新開啟後臺資料仍然存在
• sessionStorage：為每個給定的域維持一個獨立的儲存空間，該儲存空間在頁面會話期間可用，即只要瀏覽器處於開啟狀態，包括頁面的重新載入和恢復

方法

setItem()

接收一個鍵名和值作為引數，將會把鍵值對新增到儲存中，如果鍵值對已經存在，則更新覆蓋

localStorage.setItem('abc','abc')

鍵值都會以字串的形式儲存，如果不是則會轉換成字串再儲存，當然不一定會設定成功，假如設定失敗，則會丟擲QuotaExceededError錯誤，表示儲存空間滿

因為是一個物件，因此可以使用物件的方法設定屬性，比如localStorage.abc='abc'，這些

getItem()

接收一個鍵名作為引數，返回鍵名對應的值，假如沒有對應的值，返回null

localStorage.getItem('abc')

removeItem()方法

接收一個鍵名作為引數，把該鍵名從儲存中刪除

localStorage.removeItem('abc')
 

clear()

清空儲存中所有的鍵名

localStorage.clear()

key()

接收一個整數n作為引數，並返回儲存中第n個鍵名，注意：由於鍵的順序是瀏覽器自己決定的，並不是使用者新增的順序，所以不要依賴這個方法

localStorage.key(0)

length屬性

返回一個整數，表示儲存在Storage物件中鍵值對的數量

localStorage.length

StorageEvent

當Storage物件發生變化時，丟擲的StorageEvent事件，利用這個事件可以作出對應操作，注意：當Storage物件發生變化，和它同域的，其他tab中開啟的頁面會收到StorageEvent事件，當前頁面是不會收到的

StorageEvent事件的屬性

示例

        <input id="setNewDate" type="button" value="set new date">
        <div id="now"></div>
        <script>
            window.addEventListener('storage',function (params) {
                console.log(params.key,params.newValue,params.oldValue,params.storageArea,params.url);
                
            },false)
            function setNewDate(){
                var newDate=new Date().toString();
                localStorage.setItem('now',newDate);
                document.getElementById('now').innerHTML = newDate;
            }
            //監聽按鈕事件
            document.getElementById('setNewDate').addEventListener('click',setNewDate);
        </script>

同步特性

Storage的所有方法都是同步的，意味著他們會阻塞主頁面的渲染以及其他操作

容量有限制

由於localStorage中的資料是要儲存到使用者電腦的磁碟上的，如果容量不限制，則攻擊者可以寫惡意程式碼將使用者的磁碟塞滿，因此通常容量大小不超過10M

使用場景

localStorage：可以把一些非必須的，但是又能提升使用者體驗的功能資料儲存到localStorage裡面，最常見的就是使用者自定義設定資訊（例如視訊或者圖片網站上使用者選擇的列表模式和圖片模式等）

sessionStorage：適合儲存在某次使用過程中，指揮用到一次的功能資料（例如，只有在頁面開啟後提示的廣告，只有當瀏覽器關閉後再開啟才會重新開啟）

注意：不要把敏感資料儲存在Storage中，比如公司的機密資料，使用者的隱私資料等等