Cookie
- 因為HTTP請求無狀態(tài)，所以需要cookie去維持客戶端狀態(tài),
- 過期時間 expire
- cookie的生成方式
1.http response header中的set-cookie
2.js中可以通過document.cookie可以讀寫cookie - 僅僅作為瀏覽器存儲（大小4KB左右广料，能力被localstorage替代）
- cookie中在相關(guān)域名下面 —— cdn的流量損耗
- httponly (防止被黑客利用)
會員卡的例子. 去健身房中,剛開始的會開卡, 然后以后不用每次去健身房的時候就重新再驗證一遍身份, 拿著會員卡就知道這個人是會員, 當然會員卡也有過期時間 .
Cookie 的兩個作用:
- 用于維護用戶的狀態(tài)
- 瀏覽器存儲
LocalStorage
- HTML5設(shè)計出來專門用于瀏覽器存儲
- 大小為5M左右
- 僅在客戶端使用, 不和服務(wù)器端進行通信
- 接口封裝較好
- 瀏覽器本地緩存方案
SessionStorage
- 會話級別的瀏覽器存儲
- 大小為5M左右
- 僅在客戶端使用，不和服務(wù)端進行通信
- 接口封裝較好
- 對于表單信息的維護
IndexedDB(用的很少)
- IndexedDB 是一種低級API镇匀，用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)。該API使用索引來實現(xiàn)對該數(shù)據(jù)的高性能搜索背传。雖然 Web Storage 對于存儲較少量的數(shù)據(jù)很有用膘格，但對于存儲更大量的結(jié)構(gòu)化數(shù)據(jù)來說甘萧，這種方法不太有用萝嘁。IndexedDB提供了一個解決方案。
- 為應(yīng)用創(chuàng)建離線版本
CDN域名要和主站區(qū)分開, 要不會在cdn 域名下邊攜帶cookie ,產(chǎn)生帶寬資源浪費.
PWA
PWA (Progressive Web Apps) 是一種 Web App 新模型扬卷，并不是具體指某一種前沿的技術(shù)或者某一個單一的知識點牙言，我們從英文縮寫來看就能看出來，這是一個漸進式的 Web App怪得，是通過一系列新的 Web 特性咱枉，配合優(yōu)秀的 UI 交互設(shè)計卑硫，逐步的增強 Web App 的用戶體驗。
三個優(yōu)勢:
- 可靠：在沒有網(wǎng)絡(luò)的環(huán)境中也能提供基本的頁面訪問庞钢，而不會出現(xiàn)“未連接到互聯(lián)網(wǎng)”的頁面。
- 快速：針對網(wǎng)頁渲染及網(wǎng)絡(luò)數(shù)據(jù)訪問有較好優(yōu)化因谎。
- 融入（Engaging）：應(yīng)用可以被增加到手機桌面基括，并且和普通應(yīng)用一樣有全屏、推送等特性财岔。
安裝之后可以運行評測當前打開網(wǎng)頁的支持分數(shù)
lighthouse （下載地址：https://lavas.baidu.com/doc-assets/lavas/vue/more/downloads/lighthouse_2.1.0_0.zip）
Service Worker
Service Worker 是一個腳本风皿，瀏覽器獨立于當前網(wǎng)頁，將其在后臺運行,為實現(xiàn)一些不依賴頁面或者用戶交互的特性打開了一扇大門匠璧。在未來這些特性將包括推送消息,背景后臺同步桐款， geofencing（地理圍欄定位），但它將推出的第一個首要特性夷恍，就是攔截和處理網(wǎng)絡(luò)請求的能力魔眨，包括以編程方式來管理被緩存的響應(yīng)。
能讓應(yīng)用離線, 更好的一個緩存機制.
緩存內(nèi)容在Cache Storage 中.
Https才能生成
運行命令為
chrome://serviceworker-internals/
chrome://inspect/#service-workers
一個一個來:先說cookie
document.cookie = "userName=Ethan";
document.cookie = "gender=male"
在js中這么寫 然后看一下application標簽中的值.
成功設(shè)置cookie,
本身 cookie以字符串形式 存儲
那么把這個頁面關(guān)閉之后再看
cookie 默認失效時間就是當前這個網(wǎng)頁關(guān)了就沒了.
目前cookie中看幾大電商的網(wǎng)頁里, 主要還是存用戶的信息, 主要是各種的id . cookie 主要用的是跟服務(wù)器的之間交互驗證的過程, 本身cookie 能存的內(nèi)容有限, 不是為了大規(guī)模存儲數(shù)據(jù)而設(shè)計的.
接著是LocalStorage
if(window.localStorage){
localStorage.setItem("name","Ethan");
localStorage.setItem("gender","Male")
}
利用LocalStorage實現(xiàn)一個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
創(chuàng)建一個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中的數(shù)據(jù) ///查詢
// 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);
效果為
創(chuàng)建并刪除一個indexDB的過程.Note: 試了一下 如果不先close db , 就不能刪除這個db,
代碼里包含了 對book的增刪改查操作.
Service Worker
這東西主要就是把資源存在cache Storage中 , 先看下淘寶離線的時候的狀態(tài) .
也就是用這個保證了在沒有網(wǎng)絡(luò)的情況下, 可以給用戶看見一些東西 ,而不是一個頁面中啥都沒有告訴用戶當前網(wǎng)絡(luò)環(huán)境有問題
注冊Service Worker 是用navigator.serviceworker 獲取到
這里就不寫代碼了
總結(jié)一下
cookie : 特點小. 跟服務(wù)器驗證, 主要用來用戶的登錄信息存儲, 各種id.CDN域名不要有cookie
localstorage , 做緩存策略 , 更好的首屏渲染.
SessionStorage 會話層,頁面關(guān)閉就清空 ,
indexDB 大規(guī)模數(shù)據(jù) 結(jié)構(gòu)化 .性能優(yōu)化
PWA標準, 評測軟件, 關(guān)注哪些監(jiān)測點. 也就是需要做的性能優(yōu)化的部分.
其中Service Worker就是其中一部分, 主要用離線運用.
