HTML 5 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='todos-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中的数据。