对浏览器来说，使用 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>
浏览器查看方法
- 进入开发者工具
- 选择 Application
- 在左侧 Storage 下 查看 Local Storage 和 Session Storage