localStorage和cookie的區別

cookie:

稱之為會話跟蹤技術，就是在一次會話中跟蹤記錄一些狀態。cookie就可以在一次會話從開始到結束的整個過程，全程跟蹤記錄客戶端的狀態（例如：是否登錄、購物車信息、是否已下載等）。

”會話“指的就是從瀏覽器打開一個網站到訪問它的其他網頁直到瀏覽器關閉的這個過程。

cookie的特點：

1. 只能存儲文本

2. 單條存儲有大小限制4KB左右

3. 數量限制 ， 一般瀏覽器，限制大概在50條左右

4. 讀取有域名限制

5. 時效限制

6. 路徑限制

cookie的使用：

存:

 

取:

 

cookie和localStorage瀏覽器的位置

 

 

localStorage：

主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。

 

localStorage的優勢

1、localStorage拓展了cookie的4K限制

2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

localStorage的局限

1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性

2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的 JSON對象類型需要一些轉換（JSON.parse（）//轉為數組）（JSON.stringify() //轉為字符串）

3、localStorage在瀏覽器的隱私模式下面是不可讀取的

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

5、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

 

存： let users=localStorage.getItem('usersp')

取： localStorage.setItem('usersp',JSON.stringify(arr))

一個通過localStorage來達到注冊效果的例子，完整代碼：