作者:厦禾Tony_303 | 来源:互联网 | 2020-08-18 01:00
在HTML5以前我们会使用cookie,在浏览器端缓存一些数据,例如:登录用户信息,历史搜索信息等等。但是cookie所支持的容量仅仅只有4k,也没有专门的api来操作,只能依赖一些开源的库,这里使用cookies.js存储和获取cookie信息
STORAGE(存储) COOKIE
在HTML5以前我们会使用 COOKIE,在浏览器端缓存一些数据,例如:登录用户信息,历史搜索信息等等。但是COOKIE所支持的容量仅仅只有 4k ,也没有专门的api来操作,只能依赖一些开源的库, 这里使用 COOKIEs.js 存储和获取COOKIE信息
// 这是一个COOKIE值
COOKIEs.set('key', 'value');
// 链式调用
COOKIEs.set('key', 'value').set('hello', 'world');
// 可以额外设置一些参数
COOKIEs.set('key', 'value', { domain: 'www.example.com', secure: true });
// 设置缓存时间
COOKIEs.set('key', 'value', { expires: 600 }); // Expires in 10 minutes
COOKIEs.set('key', 'value', { expires: '01/01/2012' });
COOKIEs.set('key', 'value', { expires: new Date(2012, 0, 1) });
COOKIEs.set('key', 'value', { expires: Infinity });
// 获取
COOKIEs.get('key');
由此可见用COOKIE存储有一下几个缺点:
存储数据的量比较小
本身没有方便的api对其进行操作
COOKIE信息会在http请求时加入到请求头中,既不安全也增加了带宽。
WEB Storage
HTML5 提拱更好的本地存储规范 localStorage 和 sessionStorage , 它们将数据存储在本地,而且在http请求时不会携带 Storage 里的信息, 使用方式也很简单:
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage 和 localStorage 使用方式及特性基本一致,唯一的区别是, sessionStorage 只在会话内有效,当浏览器窗口关闭,sessionStorage 缓存的数据会自动被清除, 而 localStorage 只要不手动清除,它会永久保存在本地。
这里有张图片分析了 COOKIE 、 localStorage 、 sessionStorage 三者的区别
service work demo
在页面注册service-worker成功时就会调用这个js
this.Oninstall= function(e) {
var resources = new Cache();
var visited = new Cache();
// Fetch them.
e.waitUntil(resources.add(
"/index.html",
"/fallback.html",
"/css/base.css",
"/js/app.js",
"/img/logo.png"
).then(function() {
// Add caches to the global caches.
return Promise.all([
caches.set("v1", resources),
caches.set("visited", visited)
]);
}));
};
this.Onfetch= function(e) {
e.respondWith(
// Check to see if request is found in cache
caches.match(e.request).catch(function() {
// It's not? Prime the cache and return the response.
return caches.get("visited").then(function(visited) {
return fetch(e.request).then(function(response) {
visited.put(e.request, response);
// Don't bother waiting, respond already.
return response;
});
});
}).catch(function() {
// Connection is down? Simply fallback to a pre-cached page.
return caches.match("/fallback.html");
});
);
};
service worker 采用事件监听机制, 上面的代码监听了 install 和 fetch 事件,当 server worker 安装成功后,调用此方法,然后缓存页面的资源文件, fetch 页面请求事件, server worker 拦截到用户请求,当发现请求文件命中缓存则从缓存中取得文件,返回给页面,无需经过服务器,借此达到离线的目的。
当然 service worker 的功能远不止现在这些
indexedDB
indexedDB 是一个用于本地存储数据的 nosql 数据库,拥有极快的数据查询速度,而且可以直接保存js 对象。相比web sql(sqlite)更加高效,包括索引、事务处理和健壮的查询功能。indexedDB特点:
1.一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称。
2.一个数据库可包含一个或多个对象存储
一个对象存储(由一个名称惟一标识)是一个记录集合。每个记录有一个键 和一个值。该值是一个对象,可拥有一个或多个属性。键可能基于某个键生成器,从一个键路径衍生出来,或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 Javascript 标识符或多个由句点分隔的标识符。
基本使用方式如下:
var openRequest = indexedDB.open("auto_people", 3);
var db; //数据库对象
openRequest.Onupgradeneeded= function(e){
console.log("Running onupgradeeded...");
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("people")){
thisDB.createObjectStore("people", {autoIncrement:true}); //新建一个store并设置主键自增长
}
}
//创建成功
openRequest.Onsuccess= function(e){
console.log("success!");
db = e.target.result;
//Listen for add clicks
}
openRequest.Onerror= function(e){
console.log("error!");
console.dir(e);
}
//这应该站在别的地方处理,这是做一个代码展示
var transaction = db.transaction(['people'], "readwrite"); //创建一个连接
var store = transaction.objectStore("people"); //获取store
var request = store.add({
name: 'myron',
email: 'test@qq.com',
created: new Date()
}); //添加信息
request.Onerror= function(e){
alert('error!');
console.dir(e);
} //当添加失败时调用
request.Onsuccess= function(e){
console.log('Did it!');
} //添加成功时调用
request = store.get(1); //获取第一条数据
request.Onsuccess= function(e){
var result = e.target.result;
console.dir(result);
if(result){
//拿到存储的对象
}
}
application cache
以上内容就是html5离线存储知识详解,希望能帮助到大家。