?　　介紹 localStorage(本地存儲)的使用方式。包括對存儲對象的添加、修改、刪除、事件觸發(fā)等操作。

目錄

1.?介紹

　　1.1?說明

　　1.2?特點

　　1.3?瀏覽器最小版本支持

　　1.4?適合場景

2.?成員

　　2.1?屬性

　　2.2?方法

　　2.3 事件

3.?示例

　　3.1?存儲數(shù)據(jù)

　　3.2?讀取數(shù)據(jù)

　　3.3?存儲Json對象

??

1. 介紹?

1.1 說明

localStorage 即本地存儲，可用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。

在JavaScript語言中可通過 window.localStorage?或 localStorage?調(diào)用此對象。

?

1.2 特點

1) 同源策略限制。若想在不同頁面之間對同一個localStorage進行操作，這些頁面必須在同一協(xié)議、同一主機名和同一端口下。(IE8和9存儲數(shù)據(jù)僅基于同一主機名，忽略協(xié)議（HTTP和HTTPS）和端口號的要求)

2) 只在本地存儲。localStorage的數(shù)據(jù)不會跟隨HTTP請求一起發(fā)送到服務器，只會在本地生效。

3) 永久保存。保存的數(shù)據(jù)沒有過期時間，直到手動去除。

4) 存儲方式。localStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉(zhuǎn)換為字符串。true值會轉(zhuǎn)換為"true")。

5) 存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下。

可訪問?http://dev-test.nemikor.com/web-storage/support-test/?測試瀏覽器的存儲上限。

6) 同瀏覽器共享。localStorage的數(shù)據(jù)可以在同一個瀏覽器的不同標簽頁的同源頁面之間共享。

?

1.3 瀏覽器最小版本支持

支持localStorage瀏覽器的最小版本：IE8、Chrome 5。

?

1.4 適用場景

localStorage 比較適用2個地方：

1) 數(shù)據(jù)比較大的臨時保存方案。如在線編輯文章時的自動保存。

2) 多頁面訪問共同數(shù)據(jù)。sessionStorage只適用于同一個標簽頁，localStorage相比而言可以在多個標簽頁中共享數(shù)據(jù)。

?

2. 成員

2.1 屬性

?readonly int localStorage.length ：返回一個整數(shù)，表示存儲在 localStorage?對象中的數(shù)據(jù)項(鍵值對)數(shù)量。

?

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)作為參數(shù)，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。

?void?localStorage.removeItem(string key) ：將指定的鍵名(key)從?localStorage 對象中移除。

?void?localStorage.clear() ：清除?localStorage 對象所有的項。

?

2.3 事件

?storage ：當對?localStorage 進行更改時，觸發(fā)此事件。

在IE 11和Chrome中對此事件有不同的觸發(fā)機制：

1) 當前頁面是否觸發(fā)：當前頁面進行l(wèi)ocalStorage 操作時，IE 11是當前頁面也觸發(fā)此事件，Chrome 是當前頁面不觸發(fā)此事件。

2) 對localStorage進行重復操作：如存入重復的數(shù)據(jù)，IE 11是觸發(fā)此事件，Chrome 是不觸發(fā)此事件。

?

3. 示例

3.1 存儲數(shù)據(jù)

3.1.1 采用setItem()方法存儲

localStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

3.1.2 通過屬性方式存儲　　

localStorage['testKey'] = '這是一個測試的value值';

　　

3.2 獲取數(shù)據(jù)

3.2.1 通過getItem()方法取值

localStorage.getItem('testKey'); // => 返回testKey對應的值

3.2.2 通過屬性方式取值

localStorage['testKey']; // => 這是一個測試的value值

?

3.3 存儲Json對象

localStorage 也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉(zhuǎn)換為文本格式；讀取時，通過JSON.parse()將文本轉(zhuǎn)換回對象。

var userEntity = {name: 'tom',age: 22 };// 存儲值：將對象轉(zhuǎn)換為Json字符串 localStorage.setItem('user', JSON.stringify(userEntity));// 取值時：把獲取到的Json字符串轉(zhuǎn)換回對象 var userJsonStr = localStorage .getItem('user'); userEntity = JSON.parse(userJsonStr); console.log(userEntity.name); // => tom

?

End Web開發(fā)之路系列文章 菜單加載中...

轉(zhuǎn)載于:https://www.cnblogs.com/polk6/p/5684098.html

總結

以上是生活随笔為你收集整理的HTML5 localStorage本地存储的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。