在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本質是在讀寫檔案,資料多的話會...