web存储
● 需求：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案
● HTML5提供的解决方案：
a) window.sessionStorage
b) window.localStorage
● 特点：
a) 设置、读取方便
b) 容量较大，sessionStorage约5M、localStorage约20M
c) 只能存储字符串，可以将对象JSON.stringify() 编码后存储
1）Window.sessionStorage的使用
特点：
a. 生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中
b. 在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下不能获取到)
方法介绍：
a. setItem(key,value):设置数据，以键值对的方式
b. getItem(key):通过指定的键获取对应的值内容
c. removeItem(key):删除指定的key及对应的值内容
d. clear():清空所有存储内容
使用说明:
let userData = document.getElementById('userName');
// 存储数据
document.getElementById('setData').onclick = function(){
window.sessionStorage.setItem('userName', userData.value);
}
// 获取数据
document.getElementById('getData').onclick = function(){
let value = window.sessionStorage.getItem('userName');
}
尝试一下
let oUl = document.querySelectorAll('li');
let key1 = {name: '张三', age: 23};
let key2 = {name: '小芳', age: 12};
for(let i=0; i< oUl.length; i++){
oUl[i].onclick = function() {
switch (i) {
case 0:
window.sessionStorage.setItem('key1',JSON.stringify(key1))
break;
case 1:
window.sessionStorage.setItem('key2',JSON.stringify(key2))
break;
case 2:
let res = window.sessionStorage.getItem('key1')
alert(res)
break;
case 3:
window.sessionStorage.removeItem('key1')
break;
case 4:
window.sessionStorage.clear()
default:
break;
}
}
}
2）Window.localStorage的使用
特点：
a. 永久生效，除非手动删除：存储在硬盘上
b. 可以多窗口共享。但是不能跨浏览器
使用说明：
var userData = document.getElementById('userName');
// 存储数据
document.getElementById('setData').onclick = function(){
window.localStorage.setItem('userName',userData.value);
}
// 获取数据
document.getElementById('getData').onclick = function() {
var value = window.localStorage.getItem('userName');
}
// 删除数据
document.getElementById('removeData').onclick = function() {
window.localStorage.removeItem('userName')
}
尝试一下
let oUl = document.querySelectorAll('li');
let key1 = {name: '张三', age: 23};
let key2 = {name: '小芳', age: 12};
for(let i=0; i< oUl.length; i++){
oUl[i].onclick = function() {
switch (i) {
case 0:
window.localStorage.setItem('key1',JSON.stringify(key1))
break;
case 1:
window.localStorage.setItem('key2',JSON.stringify(key2))
break;
case 2:
let res = window.localStorage.getItem('key1')
alert(res)
break;
case 3:
window.localStorage.removeItem('key1')
break;
case 4:
window.localStorage.clear()
default:
break;
}
}
}
应用缓存
● 概念：使用 HTML5，通过创建 cachemanifest 文件，可以轻松地创建 web 应用的离线版本
● 优势：
a. 可配置需要缓存的资源
b. 网络无连接应用仍可用
c. 本地读取缓存资源，提升访问速度，增强用户体验
d. 减少请求，缓解服务器负担
● Cache Manifest 基础：
- 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="xxx.appcache">
...
</html>
- 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会
被缓存（除非在 manifest 文件中直接指定了该页面）。 - manifest 文件的建议的文件扩展名是：".appcache"。
- 注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行置
● Manifest 文件：
a ) 概念：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
b) manifest 文件可分为三个部分
CACHE MANIFEST 开始
CACHE 在此标题下列出的文件将在首次下载后进行缓存
NETWORK 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
1) CACHE MANIFEST说明
CACHE MANIFEST: 必须放置在第一行，这是规定
CACHE:
/common.css
/main.js
/avatar.png
上面的manifest文件列出了三个资源，当manifest文件加载后，浏览器就会从网站根目录下载这三个资源，以后当用户与因特网断开连接时，这些资源依然是可以使用的
2）NETWORK说明
NETWORK:
userLogin.js
network中的资源永远都不会被缓存，用户一旦断开连接则无法使用
3）FALLBACK说明
FALLBACK:
/html5/ /404.html
当无法连接因特网时，就会使用指定的资源代替所请求的url资源
网友评论