什麼是localstorage
前幾天在老項目中發現有對cookie的操作覺得很奇怪，諮詢下來是要緩存一些信息，以避免在URL上面傳遞參數，但沒有考慮過cookie會帶來什麼問題：
【1】cookie大小限制在4k左右，不適合存業務數據
【2】cookie每次隨HTTP事務有一起發送，浪費帶寬
localstorage可以說是對cookie的優化，使用它可以方便在客戶端存儲數據，並且不會隨著HTTP傳輸，但也不是沒有問題：
【1】localstorage 大小限制在500萬字符左右，各個瀏覽器不一致
【2】localstorage 在隱私模式下不可讀取
【3】localstorage 本質是讀寫文件，數據多的話會比較卡
【4】localstorage 不會被爬蟲爬去，不要用它完全取代URL傳參
瑕不掩瑜，以上問題皆可避免，所以我們的關注點應該放在如何使用localstorage上，並且是如何正確使用
localstorage的使用
基礎知識：
localstorage存儲對象分為兩種：
【sessionStorage】 session即會話的意思，在這裡的session是指用戶瀏覽某個網站時，從進入網站到關閉網站這個時間段，session對象的有效期就只有這麼長。
【localStorage】將數據保存在客戶端硬件設備上，不管它是什麼，意思就是下次打開計算機時候數據還在。
兩者區別就是一個作為臨時保存，一個長期保存。
localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法：
【1】setItem存儲value
用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例
【2】getItem獲取value
用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例
【3】removeItem刪除key
用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例
【4】clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代碼示例
【5】其他操作方法：點操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲，像如下的代碼：
【6】localStorage和sessionStorage的key和length屬性實現遍歷
【7】storage事件
storage還提供了storage事件，當鍵值改變或者clear的時候，就可以觸發storage事件，如下面的代碼就添加了一個storage事件改變的監聽：
這裡來一段簡單的代碼說明其基本使用：
定義基本樣式結構
index.js
效果測試
真實場景
實際工作中對localstorage的使用一般有以下需求：
① 緩存一般信息，如搜索頁的出發城市，達到城市，非實時定位信息
② 緩存城市列表數據，這個數據往往比較大
③ 每條緩存信息需要可追蹤，比如服務器通知城市數據更新，這個時候在最近一次訪問的時候要自動設置過期
④ 每條信息具有過期日期狀態，在過期外時間需要由服務器拉取數據
.......
應用場景
有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。
因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。
針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。
曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5遊戲通常會產生一些本地數據，localStorage 也是非常適用的。
如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然後按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。
安全性的考慮
需要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。
因為只要打開控制檯，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你係統中的敏感數據。
閱讀更多 JS加加網 的文章
