前端儲存 localStorage

2022-08-05 18:54:10 字數 1589 閱讀 9757

在html5中,引入了兩個新的前端儲存特性:

這兩者非常相似,都是用來在前端儲存一定量的資料,稱為前端儲存,但是這兩者仍然存在一定區別:

儲存大小:

儲存位置:

儲存內容型別:

獲取方式:

可見localstorage適合在前端儲存長時間使用的資料, 而sessionstorage適合儲存短期使用、一次性的資料

另外這裡要提一句,sessionstorage並不是session:

這裡只介紹更加常用的localstorage的使用,而sessionstorage的使用其實也類似

localstorage作為乙個在html5中引入的特性,在ie6/7等一些低版本的瀏覽器中是無法被支援的,所以建議在使用localstorage之前先檢查瀏覽器支援情況:

if (!window.localstorage)  else
localstorage的使用也很簡單,在localstorage中,資料都是以鍵值對的形式存在,可以使用json物件的形式直接對localstorage中的鍵值對進行操作:

// 設定資料

localstorage.a = 'hello';

localstorage.b = 'zero';

// 讀取資料

console.log(localstorage.a);

console.log(localstorage.b);

就那麼簡單

但是這裡要注意一點,儲存在localstorage中的資料一定是以字串形式存在的,所以當你存入/讀取其他形式的資料時,需要進行型別轉換才行:

// 存入 json 資料

localstorage.jsontest = json.stringify();

// 讀取 json 資料

console.log(json.parse(localstorage.jsontest).a);

console.log(json.parse(localstorage.jsontest).b);

有很多js庫提供了一系列簡化localstorage並且提供跨平台操作的功能,使用它們可以更加輕易地使用localstorage,這裡介紹乙個js庫——store.js

store.js 的一大優點就是他將為你自動進行型別轉換,相當於你可以直接在 localstorage 中儲存諸如 json 物件等型別的資料,這些對你來說是透明的

安裝:

npm install store
api:

// 引入

let store = require('store');

// 設定資料

store.set('user', );

// 獲取資料

let obj = store.get('user');

// 刪除資料

store.remove('user');

// 刪除所有資料

store.clearall();

// 遍歷鍵值對

store.each((value, key) => );

060JS 本地儲存localStorage

doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title head 生命週期永久生效,除非手動刪除否則關閉頁面也...

html5本地儲存Localstorage屬性

html5中,新加入了乙個localstorage特性,這個特性主要是用來作為本地儲存來使用的。並且在ie8以上的ie版本才支援localstorage這個屬性。儲存 localstorage.setitem key value 檢索 var check localstorage.getitem k...

HTML5本地儲存Localstorage的應用

localstorage可以說是對cookie的優化,使用它可以方便在客戶端儲存資料,並且不會隨著http傳輸,但也不是沒有問題 localstorage大小限制在500萬字元左右,各個瀏覽器不一致 localstorage在隱私模式下不可讀取 localstorage本質是在讀寫檔案,資料多的話會...