前端存儲 - localStorage

發佈自 Kindem的博客，歡迎你們轉載，可是要注意註明出處

localStorage 介紹

在HTML5中，引入了兩個新的前端存儲特性：

• localStorage
• sessionStorage

這二者很是類似，都是用來在前端保存必定量的數據，稱爲前端存儲，可是這二者仍然存在必定區別：

• 生命週期：

  • localStorage: localStorage的生命週期是永久的，即便關閉頁面、瀏覽器，其中的內容也不會消失，除非手動刪除localStorage中的內容
  • sessionStorage: sessionStorage的生命週期是一次瀏覽器窗口會話，瀏覽器窗口指的是一組同源頁面(來自於一個域名)的瀏覽器頁面集合，當這些窗口所有關閉以後，sessionStorage的內容將不會存在

• 存儲大小：

  • 二者都爲5MB/域名

• 存儲位置：

  • 二者都保存在客戶端，不與服務器進行交互

• 存儲內容類型：

  • 二者都只能存儲字符串，可是能夠經過類型轉換來存儲各種數據

• 獲取方式：

  • localStorage: window.localStorage
  • sessionStorage: sessionStorage

可見localStorage適合在前端存儲長時間使用的數據， 而sessionStorage適合存儲短時間使用、一次性的數據

另外這裏要提一句，sessionStorage並非session：

• sessionStorage中的‘session’是指瀏覽器窗口會話，然後者的‘session’指的是服務器會話
• 前者是前端存儲，與服務器無關，然後者的實現依賴於服務器

這裏只介紹更加經常使用的localStorage的使用，而sessionStorage的使用其實也相似

localStorage的使用

localStorage做爲一個在HTML5中引入的特性，在IE6/7等一些低版本的瀏覽器中是沒法被支持的，因此建議在使用localStorage以前先檢查瀏覽器支持狀況：

if (!window.localStorage) {
    // 當瀏覽器不支持 localStorage ...
} else {
    // 瀏覽器支持 localStorage ...
}

localStorage的使用也很簡單，在localStorage中，數據都是以鍵值對的形式存在，可使用json對象的形式直接對localStorage中的鍵值對進行操做：

// 設置數據
localStorage.a = 'hello';
localStorage.b = 'zero';
// 讀取數據
console.log(localStorage.a);
console.log(localStorage.b);

就那麼簡單

可是這裏要注意一點，存儲在localStorage中的數據必定是以字符串形式存在的，因此當你存入/讀取其餘形式的數據時，須要進行類型轉換才行：

// 存入 json 數據
localStorage.jsonTest = JSON.stringify({
    a: 'hello',
    b: 'zero'
});

// 讀取 json 數據
console.log(JSON.parse(localStorage.jsonTest).a);
console.log(JSON.parse(localStorage.jsonTest).b);

使用js庫來操做localStorage

有不少js庫提供了一系列簡化localStorage而且提供跨平臺操做的功能，使用它們能夠更加輕易地使用localStorage，這裏介紹一個js庫——store.js

store.js 的一大優勢就是他將爲你自動進行類型轉換，至關於你能夠直接在 localStorage 中儲存諸如 json 對象等類型的數據，這些對你來講是透明的

安裝：

npm install store

API：

// 引入
let store = require('store');

// 設置數據
store.set('user', {
    name: 'Kindem'
});

// 獲取數據
let obj = store.get('user');

// 刪除數據
store.remove('user');

// 刪除全部數據
store.clearAll();

// 遍歷鍵值對
store.each((value, key) => {
    // do something ...
});

參考

• http://www.javashuo.com/article/p-qbmjorur-kb.html
• http://www.javashuo.com/article/p-maiuxvgt-hd.html
• http://www.w3school.com.cn/html5/html_5_webstorage.asp
• https://www.npmjs.com/package/store