JS 本地儲存

2022-07-10 03:57:10 字數 1288 閱讀 6676

隨著網際網路的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,為了滿足各種各樣的需求,會經常性在本地儲存大量的資料,html5規範提出了相關解決方案。

1、資料儲存在使用者瀏覽器中

2、設定、讀取方便、甚至頁面重新整理不丟失資料

3、容量較大,sessionstorage約5m、localstorage約20m

4、只能儲存字串,可以將物件json.stringify() 編碼後儲存

1、生命週期為關閉瀏覽器視窗

2、在同乙個視窗(頁面)下資料可以共享

3、以鍵值對的形式儲存使用

儲存資料:

sessionstorage.setitem(key, value)

獲取資料:

sessionstorage.getitem(key)

刪除資料:

sessionstorage.removeitem(key)

清空資料:(所有都清除掉)

sessionstorage.clear()

本地儲存

儲存資料

獲取資料

刪除資料

清空所有資料

1、宣告週期永久生效,除非手動刪除 否則關閉頁面也會存在

2、可以多視窗(頁面)共享(同一瀏覽器可以共享)

以鍵值對的形式儲存使用

儲存資料:

localstorage.setitem(key, value)

獲取資料:

localstorage.getitem(key)

刪除資料:

localstorage.removeitem(key)

清空資料:(所有都清除掉)

localstorage.clear()

本地儲存

儲存資料

獲取資料

刪除資料

清空所有資料

如果勾選記住使用者名稱, 下次使用者開啟瀏覽器,就在文字框裡面自動顯示上次登入的使用者名稱

案例分析

把資料存起來,用到本地儲存

關閉頁面,也可以顯示使用者名稱,所以用到 localstorage

開啟頁面,先判斷是否有這個使用者名稱,如果有,就在表單裡面顯示使用者名稱,並且勾選核取方塊

當核取方塊發生改變的時候change事件

如果勾選,就儲存,否則就移除

記住使用者名稱

js 本地儲存 物件儲存

使用getitem 和setitem 來取資料和存資料 localstorage.setitem data item 設定data為 item localstorage.getitem data 獲取data的值 html5還提供了乙個key 方法,可以在不知道有哪些鍵值的時候使用var stora...

js本地儲存詳解

各種儲存方案 cookies 瀏覽器均支援,容量為4kb localstorage html5,容量為5m sessionstorage html5,容量為5m userdata 僅ie支援,容量為64kb flash 100kb,非html原生,需要外掛程式支援 google gears sqli...

JS本地儲存 localStorage

localstorage會可以將第一次請求的資料直接儲存到本地,這個相當於乙個5m大小的針對於前端頁面的資料庫 注意 在ie8以上的ie版本才支援localstorage這個屬性。localstorage屬於永久性儲存,如果儲存內容多的話會消耗記憶體空間,會導致頁面變卡。1.localstorage...