H5中的本地存儲

什麼是本地存儲?

HTML5提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲 （持久化本地）

sessionStorage - 針對一個 session 的數據存儲 （內存方式存儲）

它能夠把一些信息存在本地(客戶)端，一種讓網頁能夠把鍵值對存儲在用戶瀏覽器客戶端的方法。

它有哪些特色了？

　　 localStorage是沒有失效時間的，數據便一直存儲在用戶的客戶端中,不會由於你打開新網站，刷新頁面，乃相當閉你的瀏覽器而消失。

　　 在移動設備上，因爲大部分瀏覽器都支持web storage特性，所以在android和ios等智能手機上的web瀏覽器都能正常使用該特性。

爲何要學習本地存儲？

cookie的缺陷是很是明顯的

一、數據大小：做爲存儲容器，cookie的大小限制在4KB。

二、對於如今複雜的業務邏輯需求，4KB的容量除了存儲一些配置字段還簡單單值信息，對於絕大部分開發者來講真的不知期望什麼了。

三、安全性問題：因爲在HTTP請求中的cookie是明文傳遞的（HTTPS不是），帶來的安全性問題仍是很大的。

4.、網絡負擔：咱們知道cookie會被附加在每一個HTTP請求中，在HttpRequest 和HttpResponse的header中都是要被傳輸的，因此無形中增長了一些沒必要要的流量損失。

五、localstorage是移動開發必不可少的技術點。

怎樣檢測瀏覽器是否支持本地存儲?

在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該能夠很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。兩者用法徹底相同，這裏以localStorage爲例。只要window.localStorage返回值爲true，則瀏覽器支持本地存儲。代碼以下：

window.onload = function() {
    if(window.localStorage) {
        alert('支持');
    } else {
        alert('不支持');
    }
}

LocalStore的API

length	惟一的屬性，只讀，用來獲取storage內的鍵值對數量
key	根據index獲取storage的鍵名
getItem	根據key獲取storage內的對應value
setItem	爲storage內添加鍵值對
removeItem	根據鍵名，刪除鍵值對
clear	清空storage對象

window.onload = function() {
    //一、獲取本地存儲對象
    var ls = window.localStorage;
    //二、往本地存儲中存儲數據
    ls.setItem("name", "TV");
    //三、獲取本地存儲的數據個數
    console.log(ls.length);
    //四、獲取本地存儲中健對應的值
    console.log(ls.getItem("name"));
    //五、遍歷本地存儲中健值對
    for(var i = 0; i < ls.length; i++) {
        alert("key:" + ls.key(i) + "   value:" + ls.getItem(ls.key(i)));
    }
    //六、清除本地存儲中全部的數據
    ls.clear();
    //七、清除本地存儲中指定的數據
    ls.removeItem("counts");
}

 

存儲JSON數據

localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可使用JSON來處理，能夠直接調用JSON.stringify()將其轉爲字符串，讀取出來後調用JSON.parse()將字符串轉爲json格式。

/**
 * 定義json對象
 */
var stu1 = {
    'name': 'dream',
    'age': 32,
    'password': '123456'
};
/**
 * 把json對象轉換成字符串進行存儲
 * JSON.stringify() json轉換字符串
 */
localStorage.setItem("stu1", JSON.stringify(stu1));
// 存放到sessionStorage中
sessionStorage.setItem("stu1", JSON.stringify(stu1));
/**
 * 讀取JSON數據
 * 先把字符串轉換成json 在進行取值
 */
var stu = JSON.parse(localStorage.getItem("stu1"));
console.log(stu.name);
// 從session中讀取
var stuSession = JSON.parse(sessionStorage.getItem("stu1"));
console.log(stuSession.name);