前端页面缓存localStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

1、sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

2、localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

localStorage是Storage类型的实例。有以下的几种方法：

①clear（）：删除所有值。

②getItem（name）：根据指定的名字name获取对应的值

③key(index)：在指定的数字位置获取该位置的名字。

④removeItem（name）：删除由name指定的名值对

⑤setItem(name,value)：为指定名字设置一个对应的值

但是，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