H5 中有两种存储的方式
1、window.sessionStorage 会话存储：
-
保存在内存中。
-
生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
-
在同一个窗口下数据可以共享。
2、window.localStorage 本地存储：
-
有可能保存在浏览器内存里，有可能在硬盘里。
-
永久生效，除非手动删除（比如清理垃圾的时候）。
-
可以多窗口共享。
常见 API
设置存储内容：
setItem(key, value);
读取存储内容：
getItem(key);
根据键，删除存储内容：
removeItem(key);
清空所有存储内容：
clear();
案例：记住用户名和密码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label for="">
用户名：<input type="text" class="userName" />
</label>
<br /><br />
<label for="">
密 码：<input type="text" class="pwd" />
</label>
<br /><br />
<label for="">
<input type="checkbox" class="check" id="" />记住密码
</label>
<br /><br />
<button>登录</button>
<script>
var userName = document.querySelector('.userName');
var pwd = document.querySelector('.pwd');
var chk = document.querySelector('.check');
var btn = document.querySelector('button');
// 当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
btn.onclick = function () {
if (chk.checked) {
// 记住数据
window.localStorage.setItem('userName', userName.value);
window.localStorage.setItem('pwd', pwd.value);
} else {
// 清除数据
window.localStorage.removeItem('userName');
window.localStorage.removeItem('pwd');
}
}
// 下次登录时，如果记录的有数据，就直接填充
window.onload = function () {
userName.value = window.localStorage.getItem('userName');
pwd.value = window.localStorage.getItem('pwd');
}
</script>
</body>
</html>
</body>
</html>
应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。
优势
1、可配置需要缓存的资源；
2、网络无连接应用仍可用；
3、本地读取缓存资源，提升访问速度，增强用户体验；
4、减少请求，缓解服务器负担。
cache manifest 缓存清单文件
缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加MIME类型。
缓存清单文件里的内容怎样写：
（1）顶行写CACHE MANIFEST。
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
CACHE MANIFEST
CACHE:
#要缓存的文件
./img/1.jpg
./img/2.jpg
./img/3.jpg
NETWORK:
#指定必须联网才能访问的文件
./js/1.js
./js/2.js
./js/3.js
FALLBACK:
./css/1.css ./css a.css
使用
在需要应用缓存在页面的根元素(html)里，添加属性manifest = “demo.appcache”。路径要保证正确。
<html manifest="01.appcache">
