介紹 localStorage(本地存儲)的使用方式。包括對存儲對象的添加、修改、刪除、事件觸發等操作。
目錄
1. 介紹
1.1 說明
1.2 特點
1.3 瀏覽器最小版本支持
1.4 適合場景
2. 成員
2.1 屬性
2.2 方法
2.3 事件
3. 示例
3.1 存儲數據
3.2 讀取數據
3.3 存儲Json對象
1. 介紹
1.1 說明
localStorage 即本地存儲，可用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
在JavaScript語言中可通過 window.localStorage 或 localStorage 調用此對象。
1.2 特點
1) 同源策略限制。若想在不同頁面之間對同一個localStorage進行操作，這些頁面必須在同一協議、同一主機名和同一端口下。(IE8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)
2) 只在本地存儲。localStorage的數據不會跟隨HTTP請求一起發送到服務器，只會在本地生效。
3) 永久保存。保存的數據沒有過期時間，直到手動去除。
4) 存儲方式。localStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉換為字符串。true值會轉換為"true")。
5) 存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。
可訪問 http://dev-test.nemikor.com/web-storage/support-test/ 測試瀏覽器的存儲上限。
6) 同瀏覽器共享。localStorage的數據可以在同一個瀏覽器的不同標簽頁的同源頁面之間共享。
1.3 瀏覽器最小版本支持
支持localStorage瀏覽器的最小版本：IE8、Chrome 5。
1.4 適用場景
localStorage 比較適用2個地方：
1) 數據比較大的臨時保存方案。如在線編輯文章時的自動保存。
2) 多頁面訪問共同數據。sessionStorage只適用於同一個標簽頁，localStorage相比而言可以在多個標簽頁中共享數據。
2. 成員
2.1 屬性
readonly int localStorage.length ：返回一個整數，表示存儲在 localStorage 對象中的數據項(鍵值對)數量。
2.2 方法
string localStorage.key(int index) ：返回當前 localStorage 對象的第index序號的key名稱。若沒有返回null。
string localStorage.getItem(string key) ：返回鍵名(key)對應的值(value)。若沒有返回null。
void localStorage.setItem(string key, string value) ：該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。
void localStorage.removeItem(string key) ：將指定的鍵名(key)從 localStorage 對象中移除。
void localStorage.clear() ：清除 localStorage 對象所有的項。
2.3 事件
storage ：當對 localStorage 進行更改時，觸發此事件。
在IE 11和Chrome中對此事件有不同的觸發機制：
1) 當前頁面是否觸發：當前頁面進行localStorage 操作時，IE 11是當前頁面也觸發此事件，Chrome 是當前頁面不觸發此事件。
2) 對localStorage進行重復操作：如存入重復的數據，IE 11是觸發此事件，Chrome 是不觸發此事件。
3. 示例
3.1 存儲數據
3.1.1 采用setItem()方法存儲
localStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值
3.1.2 通過屬性方式存儲
localStorage['testKey'] = '這是一個測試的value值';
3.2 獲取數據
3.2.1 通過getItem()方法取值
localStorage.getItem('testKey'); // => 返回testKey對應的值
3.2.2 通過屬性方式取值
localStorage['testKey']; // => 這是一個測試的value值
3.3 存儲Json對象
localStorage 也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換為文本格式；讀取時，通過JSON.parse()將文本轉換回對象。
var userEntity = {
name: 'tom',
age: 22
};
// 存儲值：將對象轉換為Json字符串
localStorage.setItem('user', JSON.stringify(userEntity));
// 取值時：把獲取到的Json字符串轉換回對象
var userJsonStr = localStorage .getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom