localstorage、Sessionstorage是Web Storage，H5的本地存储机制。是本地存储，存储在客户端，以键/值对的形式存储的，通常以字符串存储。
是针对HTML4中 Cookie 存储机制的一个改善，由于Cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的 Web Storage 存储机制。
4.1、Cookie
（1）、定义
Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。
客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
（2）、作用
保存用户登录状态
跟踪用户行为
定制页面
创建购物车：使用cookie来记录用户需要购买的商品，再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品，方便随时进行比较)
4.2、window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 存储空间相对较小
- 以键值对的形式存储使用
sessionStorage.setItem(key,value); //存储数据
sessionStorage.getItem(key);//获取数据
sessionStorage.removeItem(key);//删除数据
sessionStorage.clear();//清除数据
4.3、window.localStorage
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一个浏览器可以共享）
- 存储空间较大
- 以健值对的形式存储使用
localStorage.setItem(key,value); //存储数据
localStorage.getItem(key);//获取数据
localStorage.removeItem(key);//删除数据
localStorage.clear();//清除数据
4.4、记住用户名案例
如果勾选记住用户名，下次用户打开浏览器，就在文本框里自动显示上次登录的用户名
<body>
<input type="text" id="username" />
<input type="checkbox" id="checkbox" />记住用户名
<script>
var userInt = document.getElementById("username");
var checkbox = document.getElementById("checkbox");
// 判断本地是否存储了username，存了就取出来赋值给input，并勾选复选框
if (localStorage.getItem("username")) {
userInt.value = localStorage.getItem("username");
checkbox.checked = true;
}
checkbox.addEventListener("change", function () {
if (this.checked) {
localStorage.setItem("username", userInt.value);
} else {
localStorage.removeItem("username");
}
});
</script>
</body>