localStorage用法總結
阿新 • • 發佈：2018-08-21
鍵值 數據庫 oca spa 前端 move 永久 拓展 會話
一、什麽是localStorage、sessionStorage
在HTML5中新加入一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲孔家不足的問題（cookie中每條cookie的存儲空間為4k），localStorage中一般瀏覽器支持的是5M大小，這個在不同瀏覽器中localStorage會有所不同。
二、localStorage的優勢與局限
localStorage的優勢
1、localStorage拓展了cookie的4k的限制
2、localStorage可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
localStorage的局限
1、瀏覽器的大小不統一，並且正在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的類型限定為string類型，這個在我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage在瀏覽器隱藏模式下是不可讀取的
4、loaclStorage本質上是對字符串的讀取，如果讀取內容多的話會消耗內存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
三、localStroage與sessionStorage的區別
二者唯一的區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空。
四、localStorage常用API
| 名稱 | 作用 |
| clear | 清空localStorage上存儲的數據 |
| setItem | 存儲數據 |
| getItem | 讀取數據 |
| removeItem | 刪除某個具體變量 |
| hasOwnProperty | 檢查localStorage上是否保存了變量X，需要傳入X |
| key | 讀取第i個數據的名字或稱為鍵值（從0開始計算） |
| length | localStorage存儲變量的個數 |
| propertyIsEnumerable | 用來檢測屬性是否屬於某個對象 |
| toLocalString | 將（數組）轉為本地字符串 |
| valueOf | 獲取所有存儲的數據 |
localStorage用法總結