也不知道csdn傳圖怎麼這個德行的。大家如果看不清就給瀏覽器放大就好了。chrom瀏覽器右上角3個點裡有縮放點+號

 

localStorage的優勢

 

1、localStorage擴充了cookie的4K限制

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

localStorage的侷限

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

2、目前所有的瀏覽器中都會把localStorage的值型別限定為string型別，這個在對我們日常比較常見的JSON物件型別需要一些轉換

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

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

5、localStorage不能被爬蟲抓取到

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

6、localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage

localStorage的瀏覽器支援情況：

 

localStorage的使用

 

 

 

首先在chmor瀏覽器f12中的console中輸入localStorage

然後就彈出了一些列宿主（瀏覽器）提供的localStorage自帶的方法，摘錄了一些常用的API如下表所示：

 

名稱	作用
setItem	儲存資料【增】
getItem	讀取資料【查單個】
removeItem	刪除某個資料【刪單個】
clear	刪除全部資料【刪全部】
length	localStorage儲存變數的個數【計算資料總數】
key	讀取第i個資料的名字或稱為鍵值(從0開始計數)
valueOf	獲取所有儲存的資料【查全部】
hasOwnProperty	檢查localStorage上是否儲存了變數x，需要傳入x【判斷】
propertyIsEnumerable	用來檢測屬性是否屬於某個物件的【判斷】
toLocaleString	將（陣列）轉為本地字串

 

 

1、【增】新增資料。注意：【改】是重新賦值和增的用法一致

引數：格式為key = value形式。資料型別為：字串，也可以用變數

2、【查】讀取資料

3、【改】

4、【刪】

5、【判斷】

6、轉換成字串

9、將JSON儲存到localStorage裡

使用場景：後臺傳遞json格式的經緯度給前臺，前臺讓它在地圖上渲染出來，而且是兩個不同的js檔案傳遞，然後就使用了這個方法。

簡單說是跨js傳遞json值，通過localStorage中轉，有種壓縮和解壓縮的味道在。