前端页面缓存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>

浏览器查看方法

1. 进入开发者工具
1. 选择 Application
1. 在左侧 Storage 下查看 Local Storage 和 Session Storage