HTML 5中的Web存储与应用缓存详细 讲解
缓存：
* 页面缓存: ht ML 、JS、 CSS 等,这些缓存资 源 是由于浏览器的行为而产生;&nbs p;
* 数据缓存
---AppCache: Cache Manifest 操作：
* 需要 服务器 与客户端相互配合；
* 所有的缓存数据都由 开发者 直接完全地掌控。
--- DOM Storage（Web Storage）：
* local storage和session storage；
* 存储一些 简单 的用key/value对即可解决的数据
HTML5的LocalStorage和sessionStorage
在HTML5 最 开始 时，本地存储有两种方式：一种是web Storage，另一种是web SQL 。
前言：由于web SQL的实现是基于SQL IT e，它更倾向于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.remov ei tem (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("n am e", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
}
综合案例2 —— 实际开发
const STORAGE_KEY=& # 39;to DOS - 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.o PE n打开页面和改变localtion. hr ef方式都可以获取到sessionStorage内部的数据
（4）sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；
（5）大小不超过5M；
（6）不自动发送数据到服务器
验证：准备两个html文件，index.html和text.html。
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<title>index</title>
<script>
function s ub mit() {
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="Lo gin " onclick="submit()" />
<input type="button" value="show" onclick="shows()" />
<a href="text.html" t arg et="_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文件存储的sessionStorag e数 据
其他说明：
后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和 从其 内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。
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='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中的数据。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5中的Web存储与应用缓存详细讲解 全部内容，希望文章能够帮你解决 html5教程-HTML5中的Web存储与应用缓存详细讲解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5中的Web存储与应用缓存详细讲解的详细内容...