前端 localStorage詳細總結

2022-02-19 11:03:17 字數 1596 閱讀 2608

在html5中,新加入了乙個localstorage特性,這個特性主要是用來作為本地儲存來使用的,解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k),localstorage中一般瀏覽器支援的是5m大小,這個在不同的瀏覽器中localstorage會有所不同。

1、localstorage拓展了cookie的4k限制

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

1、瀏覽器的大小不統一,並且在ie8以上的ie版本才支援localstorage這個屬性

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

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

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

5、localstorage不能被爬蟲抓取到

localstorage是html5的新特性,所以並不是所有的瀏覽器都支援,因此在使用localstorage時需要先判斷瀏覽器是否支援localstorage。

下面這段**就是用來判斷瀏覽器是否支援localstorage

既然localstorage是用來訪問資料的,那我們先從localstorage存資料開始說起

上面的**我們在localstorage中訪問了乙個欄位a,值是"我是a"

localstorage支援多種訪問值的方式,我們一一來看一下

上面介紹了localstorage存值與取值的三種方式,具體用哪種方式都可以,其中官方推薦的是getitem\setitem這兩種方法對其進行訪問

那麼資料存放進去我們如果想要修改該怎麼辦?別急,看下面**:

1、清空localstorage:呼叫localstorage的clear方法將清空localstorage中的所有內容

1、localstorage中存放的是string型別的值

我們看到上述**列印的結果為string,雖然我們存放的是int型別的值,但是localstorage還是把它當做string型別來存放

2、如果我們需要將json格式的資料存放到localstorage中,則需要借助json.stringify()這個方法,來將json轉換成為json字串

讀取之後要將json字串轉換成為json物件,使用json.parse()方法

前端儲存 localStorage

發布自在html5中,引入了兩個新的前端儲存特性 這兩者非常相似,都是用來在前端儲存一定量的資料,稱為前端儲存,但是這兩者仍然存在一定區別 儲存大小 儲存位置 儲存內容型別 獲取方式 可見localstorage適合在前端儲存長時間使用的資料,而sessionstorage適合儲存短期使用 一次性的...

localstorage 前端儲存

function win,doc else if typeof argument string else 刪除localstorage param val string null rmitems function val else win.local storage local storage wi...

前端儲存 localStorage

在html5中,引入了兩個新的前端儲存特性 這兩者非常相似,都是用來在前端儲存一定量的資料,稱為前端儲存,但是這兩者仍然存在一定區別 儲存大小 儲存位置 儲存內容型別 獲取方式 可見localstorage適合在前端儲存長時間使用的資料,而sessionstorage適合儲存短期使用 一次性的資料 ...