*html5的localStorage之【增、刪、改、查】

楊西瓜 發表於 2017-12-01
localStorage HTML5

也不知道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的瀏覽器支援情況:

*html5的localStorage之【增、刪、改、查】

 

localStorage的使用

 

 

 

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

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

 

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

 

 

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

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

*html5的localStorage之【增、刪、改、查】

2、【查】讀取資料

*html5的localStorage之【增、刪、改、查】

3、【改】

*html5的localStorage之【增、刪、改、查】

4、【刪】

*html5的localStorage之【增、刪、改、查】

5、【判斷】

*html5的localStorage之【增、刪、改、查】

6、轉換成字串

*html5的localStorage之【增、刪、改、查】

9、將JSON儲存到localStorage裡

*html5的localStorage之【增、刪、改、查】

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

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