前端頁面緩存localStorage

時間 2019-11-11

標籤前端頁面緩存 localstorage 简体版

原文原文鏈接

對瀏覽器來講，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，並且容量更大，它包含兩種：localStorage 和 sessionStoragejavascript

一、sessionStorage（臨時存儲）：爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載java

二、localStorage（長期存儲）：與 sessionStorage 同樣，可是瀏覽器關閉後，數據依然會一直存在jquery

localStorage對象是HTML5的客戶端存儲持久化數據的方案。爲了能訪問到同一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。spring

localStorage是Storage類型的實例。有如下的幾種方法：數組

①clear（）：刪除全部值。瀏覽器

②getItem（name）：根據指定的名字name獲取對應的值session

③key(index)：在指定的數字位置獲取該位置的名字。工具

④removeItem（name）：刪除由name指定的名值對對象

⑤setItem(name,value)：爲指定名字設置一個對應的值ip

可是，storage只能存儲字符串的數據，對於JS中經常使用的數組或對象卻不能直接存儲。

<body>
<div>
    name: <input name="name"/><br>
    age:<input name="age"/>
    <button onclick="toBaidu()"></button>
</div>
<script type="text/javascript" src="springMVC4/js/jquery-1.11.3.min.js"></script>

<script>
    $(function(){
        $("input[name='name']").val(localStorage.getItem("name"));
        $("input[name='age']").val(localStorage.getItem("age"));
    });
    function toBaidu() {
        localStorage.setItem("name",$("input[name='name']").val());
        localStorage.setItem("age",$("input[name='age']").val());
        window.location.href="http://localhost:8080/testLocalStorage";
    }
</script>
</body>