Cookie
- 因为HTTP请求无状态，所以需要cookie去维持客户端状态,
- 过期时间 expire
- cookie的生成方式
1.http response header中的set-cookie
2.js中可以通过document.cookie可以读写cookie - 仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代）
- cookie中在相关域名下面 —— cdn的流量损耗
- httponly (防止被黑客利用)
会员卡的例子. 去健身房中,刚开始的会开卡, 然后以后不用每次去健身房的时候就重新再验证一遍身份, 拿着会员卡就知道这个人是会员, 当然会员卡也有过期时间 .
Cookie 的两个作用:
- 用于维护用户的状态
- 浏览器存储
LocalStorage
- HTML5设计出来专门用于浏览器存储
- 大小为5M左右
- 仅在客户端使用, 不和服务器端进行通信
- 接口封装较好
- 浏览器本地缓存方案
SessionStorage
- 会话级别的浏览器存储
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好
- 对于表单信息的维护
IndexedDB(用的很少)
- IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。
- 为应用创建离线版本
CDN域名要和主站区分开, 要不会在cdn 域名下边携带cookie ,产生带宽资源浪费.
PWA
PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。
三个优势:
- 可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。
- 快速：针对网页渲染及网络数据访问有较好优化。
- 融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。
安装之后可以运行评测当前打开网页的支持分数
lighthouse （下载地址：https://lavas.baidu.com/doc-assets/lavas/vue/more/downloads/lighthouse_2.1.0_0.zip）
Service Worker
Service Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。
能让应用离线, 更好的一个缓存机制.
缓存内容在Cache Storage 中.
Https才能生成
运行命令为
chrome://serviceworker-internals/
chrome://inspect/#service-workers
一个一个来:先说cookie
document.cookie = "userName=Ethan";
document.cookie = "gender=male"
在js中这么写 然后看一下application标签中的值.
成功设置cookie,
本身 cookie以字符串形式 存储
那么把这个页面关闭之后再看
cookie 默认失效时间就是当前这个网页关了就没了.
目前cookie中看几大电商的网页里, 主要还是存用户的信息, 主要是各种的id . cookie 主要用的是跟服务器的之间交互验证的过程, 本身cookie 能存的内容有限, 不是为了大规模存储数据而设计的.
接着是LocalStorage
if(window.localStorage){
localStorage.setItem("name","Ethan");
localStorage.setItem("gender","Male")
}
利用LocalStorage实现一个js文件缓存效果. js代码如下
var cacheJs = localStorage.getItem("cacheJs");
if(cacheJs){
eval(cacheJs);
}else{
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.onprogress = progressCallback;
xmlHttpRequest.open("GET","./cache.js",true);
xmlHttpRequest.send();
function callback(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var jsContent = this.response;
eval(jsContent);
localStorage.setItem("cacheJs",jsContent);
}else{
console.log("Request was unsuccessful:" + xmlHttpRequest.status);
}
}
function progressCallback(e){
e = e || event;
if(e.lengthComputable){
console.log("Received " + e.loaded + " of " + e.total + " bytes");
}
}
}
效果为 第一次将js 文件存到localstorage 中
第二次读取即从localstorage 中读
indexedDB
创建一个indexedDB
function openIndexDb(name,callback){
var request = window.indexedDB.open(name);
request.onerror = function(e){
console.log("open indexdb error");
}
request.onsuccess= function(e){
myDB.db = e.target.result;
callback && callback();
}
//from no db to firstVersion . firstVersion to SecondVersion
request.onupgradeneeded = function (e) {
var store = e.currentTarget.result.createObjectStore("books",{keyPath:"isbn"});
console.log(store);
store.createIndex("by_title",'title',{unique:true});
store.createIndex("by_author","author");
store.put({title:"三国演义",author:"罗贯中",isbn:123});
store.put({title:"水浒装",author:"施耐庵",isbn:234});
store.put({title:"西游记",author:"吴承恩",isbn:345});
store.put({title:"红楼梦",author:"曹雪芹",isbn:456});
}
}
var myDB = {
name:"testDB",
version: "1",
db : null
}
openIndexDb(myDB.name,function(){
console.log("successfully open indexDB ");
// myDB.db.close();
// deleteDB(myDB.name);
})
function addBook(db){
var transaction = db.transaction("books",'readwrite');
var store = transaction.objectStore('books');
//获取当前indexedDB中的数据 ///查询
// store.get(456).onsuccess = function(e){
// console.log(e.target.result);
// }
//添加一条书的记录 //添加
// store.add({
// title:"论语",
// author:"孔子",
// isbn:666
// })
//删除
// store.delete(456);
//更新
store.put({title:"红楼梦1",author:"Ethan",isbn:456});
}
function deleteDB(name){
var deleteDb = window.indexedDB.deleteDatabase(name);
deleteDb.onsuccess = function() {
console.log('complete');
};
}
setTimeout(function(){
addBook(myDB.db)
},3000);
效果为
创建并删除一个indexDB的过程.Note: 试了一下 如果不先close db , 就不能删除这个db,
代码里包含了 对book的增删改查操作.
Service Worker
这东西主要就是把资源存在cache Storage中 , 先看下淘宝离线的时候的状态 .
也就是用这个保证了在没有网络的情况下, 可以给用户看见一些东西 ,而不是一个页面中啥都没有告诉用户当前网络环境有问题
注册Service Worker 是用navigator.serviceworker 获取到
这里就不写代码了
总结一下
cookie : 特点小. 跟服务器验证, 主要用来用户的登录信息存储, 各种id.CDN域名不要有cookie
localstorage , 做缓存策略 , 更好的首屏渲染.
SessionStorage 会话层,页面关闭就清空 ,
indexDB 大规模数据 结构化 .性能优化
PWA标准, 评测软件, 关注哪些监测点. 也就是需要做的性能优化的部分.
其中Service Worker就是其中一部分, 主要用离线运用.
