localstorage的使用

什么是localstorage

localStorage是HTML5中新增的一個本地存儲方式，HTML5之前主要是使用cookies存儲，但是cookie存儲內容只能在4k之內，在不同的瀏覽器中localStorage會有所不同，不過存儲上線一般是5M。

（HTML5中還有一個sessionStorage，與localstorage的區別是，當會話結束sessionStorage的鍵值對就會被清空，而localstorage是沒有時間限制的數據存儲）

localstorage優缺點

優點：

1、localStorage突破cookie的4K限制，擁有更大的本地存儲空間

2、localstorage回將第一次請求的數據直接存儲到本地，相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬

缺點：

1、在瀏覽器上存儲空間的不統一，並且IE瀏覽器需要在IE8以上才支持

2、目前所有瀏覽器把localstorage值限制為string類型，對比日常的json需要一些轉換

3、在瀏覽器隱私模式下localstorage不可讀取

4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

localstorage的使用

//存儲
localStorage.name="博客園"
localStorage.age=10

//查找 
console.log(localStorage.name) //log出 博客園

//注意：localStorage本質上是對字符串的讀取

console.log(typeof(localStorage.age))　　//存儲進去的是數字，但是log出的是string

//刪除
localStorage.removeItem("name")　　

console.log(localStorage.name)　　//log出 undefined

 

localstorage存儲json

//存儲的JSON要先轉化為字符串
var jsonStr = JSON.stringify({"name": "博客園", "age": "10"})

//存儲
localStorage.json = jsonStr

//將查到到的json字符串轉化為JSON對象

var json = JSON.parse(localStorage.json)

console.log(json.name)        //log出  博客園