HTML5 web儲存

Gckkoo發表於2017-10-31
HTMLWeb

HTML5 web儲存

特點：
鍵值對的形式儲存資料
在本地瀏覽器儲存資料
有效期：未來的事件（expires）
儲存資料的容量：<4kb
所有的http請求都會帶上cookie資訊，（聯想HTTPget請求可以傳遞的資料），從某種意義上來說，用cookie儲存不是那麼安全

2.1用法

2.1.1儲存資料

localStorage.setItem("key",value);
setitem(key,value)有兩個引數，第一個引數是儲存資料的鍵名，第二個引數是儲存資料的值。

2.1.2獲取資料

localStorage.getItem("key");
getIntem(k);只有一個引數，該引數是獲取資料的鍵名

2.1.3刪除指定鍵名的資料

localStorage.removeItem("age");
removeItem(k);根據指定的鍵名刪除資料，

2.1.4清除

localStorage.clear();
clear()；清除所有儲存在localStorage的資料
注意：key寫具體的時候，要加””;
localStorage儲存的資料沒有時間限制

<body>
<form>
    <label for="username">姓名</label>
    <input id="username" type="text"/><br/>
    <label for="age">年齡</label>
    <input id="age" type="text"/><br/>
    <button id="saveBtn">儲存資料</button>
    <button id="removeBtn">刪除資料</button>
    <button id="getBtn">獲取資料</button>
</form>
</body>
<script src="../assert/jquery-1.9.1.min.js"></script>
<script>
    //儲存資料
    $("#saveBtn").click(function () {
        var username = $("#username").val();    //        姓名
        localStorage.setItem("name",username);
        var age = $("#age").val();  //        年齡
        localStorage.setItem("age",age);
    });
    //刪除資料
    $("#removeBtn").click(function () {
        //單個刪除
//        localStorage.removeItem("name");
//        localStorage.removeItem("age");
        //一次性刪除
        localStorage.clear();
    });
    //獲取資料
    $("#getBtn").click(function () {
        var value = localStorage.getItem("age");
        alert(value)
    });
</script>

3 sessionStorage

sessionStorage的執行方式與localStorage的方式一樣，唯一不同的而是sessionStorage儲存的資料的有效期僅對當前的瀏覽器（或頁面）有效，一旦關閉，之前儲存的內容也就沒有了

4 區別

特性 cookie localStorage sessionStprage
生命週期 根據設定的事件 除非被清除，否則永遠存在 瀏覽器一關閉，就沒了
儲存容量 <4K 5Mb 5Mb
和伺服器通訊（http） 每次請求都會帶上cookie 只保持在瀏覽器，和伺服器沒有半毛錢關係 只保持在瀏覽器，和伺服器沒有半毛錢關係
易用性 介面不大友好（引數需要自個拼接） 介面還可以接受！對於object、array等型別的資料儲存比較麻煩 介面還可以接受！對於object、array等型別的資料儲存比較麻煩

5 儲存物件

Storage只能儲存字串，不能儲存物件或者陣列，如果要儲存的話，，必須經過轉換，通過JSON物件中的stringify()將物件轉換為字串
var str = JSON.stringify(informaction); //轉換為字串
將物件轉換為字串，然後進行儲存，同樣的也可以通過JSON物件中的parse()將物件進行解析
var result = JSON.parse(str); //解析物件

5.1 JSON.parese();將字串轉換為物件

5.2 JSON.stringify();將物件轉換為字串
5.3解決問題
（1）localStorage/sessionStorage存資料
先將需要儲存的物件→字串JSON.Stringify()
儲存該字串
（1）localStorage/sessionStorage讀資料
先將需要讀取的字串→物件 JSON.parese()

$("#saveBtn").click(function () {
    var username = $("#username").val();
    var age = $("#age").val();
    var informaction = new Object();    //建立物件
    informaction.username = username;   //將姓名存入物件
    informaction.age = age;     //將年齡存入物件
    var str = JSON.stringify(informaction); //轉換為字串
    var result = JSON.parse(str);   //解析物件
    localStorage.setItem("",str);
});
//從本地快取裡面拿出資料，同時拿出的資料有可能是空的，所以需要||"[]"
var _history = localStorage.getItem(historyCityKey) ||"[]";
var historyCity=JSON.parse(_history);
return historyCity;

相關文章