HTML5中的Web存储与应用缓存详细讲解
html5中的web存储与应用缓存详细讲解
缓存：
* 页面缓存: html、js、css等,这些缓存资源是由于的行为而产生;
* 数据缓存
---appcache: cache manifest 操作：
* 需要服务器与客户端相互配合；
* 所有的缓存数据都由开发者直接完全地掌控。
---dom storage（web storage）：
* local storage和session storage；
* 存储一些简单的用key/value对即可解决的数据
html5的localstorage和sessionstorage
在html5 最开始时，本地存储有两种方式：一种是web storage，另一种是web sql。
前言：由于web sql的实现是基于sqlite，它更倾向于database方向，且w3c官方在2011年11月宣布不在维护web sql规范，故其api接口目前已经不属于html 5的范畴。因此，目前我们常讲的html 5本地存储，多指的是web storage。
1、web storage（localstorage + sessionstorage）
web storage 是html5引入的一个重要的功能，在的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4kb左右（浏览器不同，大小也不同），而web storage的大小有5mb。其api提供的方法有以下几种：
1.setitem (key, value) —— 保存数据，以键值对的方式储存信息。
2.getitem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
3.removeitem (key) —— 删除单个数据，根据键值移除对应的信息。
4.clear () —— 删除所有的数据
5.key (index) —— 获取某个索引的key
1.1 localstorage和sessionstorage的方法
setitem存储value
sessionstorage.setitem(“key”, “value”);
localstorage.setitem(“site”, “js8.in”);
getitem获取value
var value = sessionstorage.getitem(“key”);
var site = localstorage.getitem(“site”);
removeitem删除key
sessionstorage.removeitem(“key”);
localstorage.removeitem(“site”);
clear清除所有的key/value
sessionstorage.clear();
localstorage.clear();
综合案例1
var storage = null;
if(window.localstorage){ //判断浏览器是否支持localstorage
storage = window.localstorage;
storage.setitem("name", "rick"); //调用setitem方法，存储数据
alert(storage.getitem("name")); //调用getitem方法，弹框显示 name 为 rick
storage.removeitem("name"); //调用removeitem方法，移除数据
alert(storage.getitem("name")); //调用getitem方法，弹框显示 name 为 null
}
综合案例2 —— 实际开发
const storage_key='to-vuejs'
// const是es6中的语法，todos-vuejs是保存的键
// 导出
export default {
fetch:function(){ // 取出数据 —— 注意：localstorage是json格式的数据，需要转为数组使用
return json.parse(window.localstorage.getitem(storage_key)||'[]');
},
save:function(items){ // 保存数据
window.localstorage.setitem(storage_key,json.stringify(items))
}
}
1.2其他操作方法：点操作和[ ]
web storage可以像普通对象一样用点(.)操作符，及[ ]的方式进行数据存储，像如下的代码：
var storage = window.localstorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
localstorage和sessionstorage的key和length属性实现遍历例如下面的代码：
var storage = window.localstorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getitem(key);
console.log(key + "=" + value);
}
2、storage事件
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：
if(window.addeventlistener){
window.addeventlistener("storage",handle_storage,false);
}
else if(window.attachevent){
window.attachevent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){
e=window.event;
}
}
3、两者之间的区别
3.1 localstorage和sessionstorage功能
localstorage的生命周期是永久性的。假若使用localstorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
sessionstorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。
3.2 localstorage 相对sessionstorage简单一点，需要注意的地方不是很多。
sessionstorage需要注意的有以下几点：
（1）页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；
（2）只有在当前页面打开的链接，才可以访sessionstorage的数据；
（3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionstorage内部的数据
（4）sessionstorage不跨窗口，在另外一个窗口打开sessionstorage就不存在了，它只在当前窗口有效；
（5）大小不超过5m；
（6）不自动发送数据到服务器
验证：准备两个html文件，index.html和text.html。
index.html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<script>
function submit() {
var str = document.getelementbyid("text").value.trim();
if(str === '') {
return;
}
setinfo(str);
document.getelementbyid("text").value = "";
}
//储存数据
function setinfo(name) {
var storage = window.sessionstorage;
storage.setitem('name', name);
}
//显示数据
function shows() {
var storage = window.sessionstorage;
var str = ' ' + storage.getitem("name");
document.getelementbyid("text").value = str;
}
</script>
</head>
<body>
your name is:<input type="text" name="text" id="text" />
<input type="button" value="login" onclick="submit()" />
<input type="button" value="show" onclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>
</html>
test.html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<script>
var storage = window.sessionstorage;
alert(storage.getitem("name"));
</script>
</body>
</html>
（1）页面刷新不会消除数据
当点击show按钮后，输入框内显示 “null“，此时sessionstorage中没有存储key为 ”name“的数据。
当在文本中输入”rick“后，点击login按钮，待输入框清空的时候，数据已经存储到sessionstorage中，再去点击show按钮，会显示” rick“
此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”rick“。
（2）只有在当前页面打开的链接，才可以访sessionstorage的数据；
点击页面上的 “点击打开” ，就会弹出对应的index.html文件存储的sessionstorage数据
其他说明：
后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionstorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionstorage中的数据。