瀏覽器存儲(chǔ)

Eastboat 發(fā)布于2019-08-20 14:36 / 3487人閱讀

摘要：下面就一個(gè)簡單例子來說明存取值曾田生獲取刪除指定值清空存儲(chǔ)事件和存儲(chǔ)發(fā)生變化就會(huì)觸發(fā)存儲(chǔ)事件，事件采用廣播的機(jī)制，會(huì)在同樣站點(diǎn)的作用域范圍內(nèi)發(fā)送消息。

客戶端的存儲(chǔ)相當(dāng)于給瀏覽器賦予了記憶功能。同一個(gè)站點(diǎn)的數(shù)據(jù)是如何共享數(shù)據(jù)的，一個(gè)頁面填寫的表單如何顯示在另一個(gè)頁面中，頁面關(guān)閉或?yàn)g覽器退出，打開還能重新顯示原來的頁面，這些都可以依靠瀏覽器的存儲(chǔ)功能來實(shí)現(xiàn)。

一、Web存儲(chǔ) 1、localStorage和sessionStorage

基本代碼實(shí)現(xiàn)

兩個(gè)屬性都代表同一個(gè)Storage對(duì)象，一個(gè)持久化關(guān)聯(lián)數(shù)組，數(shù)組使用字符串來索引，儲(chǔ)存的值也是字符串的形式。localStorage和sessionStorage的區(qū)別在于儲(chǔ)存的有效期和作用域不同，儲(chǔ)存形式和api是一樣的。

一般使用形式

localStorage.name = "曾田生"; // 儲(chǔ)存字符串
var name = localStorage.name; // 獲取存儲(chǔ)信息

當(dāng)儲(chǔ)存數(shù)字時(shí)會(huì)自動(dòng)轉(zhuǎn)化成字符串，所以在取值是需要手動(dòng)轉(zhuǎn)換

localStorage.age = 666;
var age = parseInt(localStorage.age);

日期也一樣

localStorage.time = (new Date()).toUTCString();
var time = new Date(Date.parse(localStorage.time));

咱們常用的json數(shù)據(jù)

localStorage.jsonData = JSON.stringify(data);
var jsonData = JSON.parse(localStorage.jsonData);

存儲(chǔ)API

localStorage和sessionStorage除了可以通過上面的設(shè)置屬性來存儲(chǔ)值和通過查詢屬性來取值外，還有一套API操作數(shù)據(jù)。
下面就一個(gè)簡單例子來說明：

// 存取值
localStorage.setItem("name","曾田生");
var name = localStorage.getItem("name");
// 獲取 key - value 
var keyName = localStorage.key(0);
var value = localStorage.getItem(keyName);
// 刪除指定值
localStorage.removeItem("name");
// 清空 localStora
localStorage.clear();

存儲(chǔ)事件

localStorage和sessionStorage 存儲(chǔ)發(fā)生變化就會(huì)觸發(fā)存儲(chǔ)事件，事件采用廣播的機(jī)制，會(huì)在同樣站點(diǎn)的作用域范圍內(nèi)發(fā)送消息。注意的是 localStorage和sessionStorage 的區(qū)別在于作用域的不同，所以事件觸發(fā)的窗口也有區(qū)別，作用域在下面小節(jié)會(huì)講到，還有一點(diǎn)是在發(fā)生存儲(chǔ)數(shù)據(jù)改變的窗口上是不會(huì)觸發(fā)該存儲(chǔ)事件的。

下面一個(gè)小例子：
我打開了兩個(gè)頁面 index.html

btn.addEventListener("click", function () {
        localStorage.name = "曾田生"; // 儲(chǔ)存字符串
        var name = localStorage.name; // 獲取存儲(chǔ)信息
    })

index2.html 做存儲(chǔ)事件監(jiān)聽：window.addEventListener

window.addEventListener("storage", function(e){
        console.log(e);
        console.log("oldValue: "+ e.oldValue + " newValue:" + e.newValue);

    });

點(diǎn)擊 index.html 的 button 后 index2.html打印出如下消息

存儲(chǔ)有效期和作用域

localStorage和sessionStorage 的使用和api是相同的，但它們的有效期和作用域是有區(qū)別的。

（1）、localStorage
localStorage 的作用域限定在文檔源級(jí)別，什么意思呢，協(xié)議、主機(jī)名、端口三者一樣那就是同一文檔源，同源的文檔間共享同樣的localStorage數(shù)據(jù)。比如如下：

http://www.example.com   // 協(xié)議：http；主機(jī)名：www.example.com
https://www.example.com     // 不同協(xié)議
http://demo.example.com     // 不同 主機(jī)名
http://www.example.com:8000 // 不同端口

以上只有不滿足同源要求，即使在同一臺(tái)服務(wù)器也不能共享localStorage數(shù)據(jù)。

(2)、sessionStorage
首先 sessionStorage的作用域也是限定在同源里面，并且sessionStorage的作用域還被限定在窗口中。
比如：
A.html

B.html

點(diǎn)擊 A.html 的

但是不通過 A.html 的 二、cookie

cookie最早是設(shè)計(jì)為被服務(wù)器所用，cookie數(shù)據(jù)會(huì)自動(dòng)在web服務(wù)器和web瀏覽器之間傳輸?shù)模梅?wù)器可讀取來著客戶端cookie的值并修改其cookie值。
或許你對(duì)自動(dòng)傳輸這個(gè)概覽不是很理解，先看一個(gè)例子：
設(shè)置cooike：

window.onload = function () {
    document.cookie = "user = zss";
    document.cookie = "age = 233";
}

接著想服務(wù)端隨便發(fā)送一個(gè)GET請(qǐng)求：

app.get("/getAge", function (req, res) {
    console.log("-------------cookie---------");
    console.log(req.headers);
    console.log("-------------cookie---------");
    res.send("Hello World");
});

var server = app.listen(8081, function () {
    console.log("應(yīng)用實(shí)例，訪問地址為 http://%s:%s", host, port)
});

服務(wù)端接受GET請(qǐng)求咱們打印出響應(yīng)頭看看：

-------------cookie---------
{ host: "127.0.0.1:8081",
  connection: "keep-alive",
  "upgrade-insecure-requests": "1",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
  accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  "accept-encoding": "gzip, deflate, sdch, br",
  "accept-language": "zh-CN,zh;q=0.8",
  cookie: "Hm_lvt_800f0f35f4557a08958a37aa22f2d2b0=1485226901; user=zss; age=233",
  "if-none-match": "W/"b-sQqNsWTgdUEFt6mb5y4/5Q"" }
-------------cookie---------

有沒有看到雖然咱們客戶端隨便發(fā)送個(gè)請(qǐng)求，客戶端就會(huì)把設(shè)置的 cookie 給帶了過去，cookie數(shù)據(jù)會(huì)自動(dòng)在web服務(wù)器和web瀏覽器之間傳輸

1、保存和讀取cookie

保存 cookie

設(shè)置cookie非常簡單，只需將cookie屬性設(shè)置為一個(gè)字符串形式的值。如

    document.cookie = "name="+encodeURIComponent("曾田生");

為什么需要 encode值呢，因?yàn)閏ookie的名/值中的值是不允許包含分號(hào)、逗號(hào)和空白符的。所用一般在存值得使用會(huì)采取相應(yīng)的 encode，同樣讀取值得使用也需要 decode 一下。
上面一簡單名/值的形式儲(chǔ)存cookie數(shù)據(jù)的有效期只在當(dāng)前 Web 瀏覽器的會(huì)話內(nèi)，一但用戶關(guān)閉瀏覽器cookie數(shù)據(jù)就丟失。
所以還可以給 cookie 添加日期和一些其他信息,只需以逗號(hào)分開：

document.cookie = "name="+encodeURIComponent("曾田生")+
                        ";max-age="+60*60+   // 設(shè)置有效期 60*60就是1小時(shí)有效
                        ";path="+"path"+     // 設(shè)置路徑
                        ";domain="+"domain"+
                        ";secure="+"secure";

讀取 cookie

讀取cookie 其返回值是一個(gè)字符串，所以下面寫個(gè)了方法將字符串的 cookie 轉(zhuǎn)成對(duì)象的形式：

function getCookie(){
        var cookie = {};
        var all = document.cookie;
        if(all === ""){
            return cookie;
        }
        var list = all.split("; ");
        for(var i= 0,len=list.length;i
2、cookie 的作用域
cookie的作用域是通過文檔源和文檔路徑來確定的。該作用域是通過文檔源和文檔路徑來確定，也可通過cookie的 path和domain屬性來配置不同的作用域。
默認(rèn)情況
默認(rèn)情況下在下面頁面創(chuàng)建了cookie,那么該cooki對(duì)頁面同目錄或子目錄是可見的，如下頁面創(chuàng)建了cookie：
http://www.example.com/src/index.html
那么該cookie對(duì)下面的頁面是可見的：
http://www.example.com/src/index2.html
http://www.example.com/src/A/index.html
http://www.example.com/src/B/C/index.html

對(duì)下面頁面不可見：
http://www.example.com/index3.html
http://www.example.com/A/index.html

path 改變作用域
前面也講了，默認(rèn)情況下哪個(gè)頁面創(chuàng)建了cookie,那么該cooki對(duì)頁面同目錄或子目錄是可見的。那要是我們有個(gè)需求是：用戶在這個(gè)頁面添加的表單數(shù)據(jù)在整個(gè)網(wǎng)站都可以用（包括它的父級(jí)頁面）。
那就需要利用 cookie的path 屬性了，如：
cookie是在以下頁面所創(chuàng)建的：
http://www.example.com/A/B/index.html

修改 path：
document.cookie ="path="+"/A"；   // 設(shè)置路徑
本來只能在 /B 或 /B 以下的目錄能訪問到cookie ，現(xiàn)在 是在 /A 即以下目錄能訪問cookie 了！
進(jìn)一步修改path：
document.cookie ="path="+"/"；   // 設(shè)置路徑
現(xiàn)在是該cookie對(duì)任何 http://www.example.com 這臺(tái)服務(wù)器可見了！
發(fā)現(xiàn)點(diǎn)：把cookie的 path 設(shè)為 "/" 等于前面所說的 localStorage 擁有相同的作用域了！
domain 修改作用域
還有一種需求是:一些業(yè)務(wù)需要，A.example.com 域下的服務(wù)器想要讀取 B.example.com 域下的服務(wù)器設(shè)置的cooike值，那該怎么辦呢，domain它說它能解決：
document.cookie ="path="+"/"   // 設(shè)置路徑
                  +";domain="+".example.com" // 設(shè)置domain
那么，cookie就能在 example.com 下的任何其他服務(wù)器可見了。
cooike 的 secure 屬性
cookie 默認(rèn)是以不安全的形式（通過普通的，不安全的 HTTP 鏈接）傳遞的。
設(shè)置 secure：
document.cookie ="secure="+true"   
那么 cookie 只能在 HTTPS 或其他安全協(xié)議鏈接的時(shí)候它才能傳遞。
三、離線Web儲(chǔ)存
localStorage和sessionStorage 只是保存了 web應(yīng)用程序相關(guān)的數(shù)據(jù)，要是我們想要保存比如圖片、
css 、js等文件 ，是否能做到呢。
1、appcache
HTML5新增了‘應(yīng)用程序緩存’，配合一份緩存清單，就可實(shí)現(xiàn)比如圖片、css 、js等文件的緩存，甚至做到
離線web應(yīng)用。
下面以一個(gè)例子講述：
項(xiàng)目文件：

index.html: 在 



    
    appcache test
    








其中 style.css
body{
    background: #eb5f6f;
}
.img-1{
    width: 100px;
    height: 100px;
    background: url("img/img_1.png") no-repeat;
    background-size: 100%;
}
.img-2{
    width: 100px;
    height: 100px;
}
index.js
window.onload = function () {
    document.getElementById("text").innerHTML="appcache 測(cè)試";
}
app.appcache 配置文件：
CACHE MANIFEST
# version 1.0.1

index.js
style.css
img/img_1.png
img/img_2.png


NETWORK:
*

FALLBACK:
./index.html ./404.html
第一次加載頁面：
可以看到資源被緩存了

再次刷新頁面：
NetWork這邊的 size 顯示 form disk cache ，并且咱們的網(wǎng)頁，css js 和圖片都是正常顯示的，但這時(shí)是從磁盤上獲取的文件，而不是網(wǎng)絡(luò)上。

有了上面的例子，咱們來介紹介紹  app.appcache 配置文件：
CACHE MANIFEST
清單文件必須以 CACHE MANIFEST 開頭，其余一行一個(gè) url，指向相對(duì) .appcache 路徑的資源，上面也看到了，資源可以是 .css .js 圖片或其他。
NETWORK
標(biāo)識(shí)了URL的資源從不緩存
NETWORK:
*
則表示任何不在清單的資源，瀏覽器都從網(wǎng)絡(luò)加載。
FALLBACK
這個(gè)標(biāo)簽底下每行都包含兩個(gè)URL ，比如：
FALLBACK:
./index.html ./404.html
第一個(gè)Url 表示匹配到的資源不被緩存起來，會(huì)去網(wǎng)絡(luò)加載，第二個(gè)Url表示當(dāng)?shù)谝粋€(gè)Url從網(wǎng)絡(luò)加載的資源出錯(cuò)，那就加載第二個(gè)Url的資源來顯示。
2、j慎用 appcache
雖然看了上面 appcache 感覺挺不錯(cuò)的樣子，但不幸的是官方已經(jīng)不推薦使用，這一套緩存在實(shí)際項(xiàng)目中純?cè)诤芏嗳毕荩热纾?/p>
1、當(dāng)緩存清單緩存了文件，文件有改動(dòng)，但用戶訪問的資源還是從緩存中讀取，必須修改 appcache緩存文件，當(dāng)用戶
再次訪問網(wǎng)頁的時(shí)候緩存文件采取從新從服務(wù)器拉去資源，但糟糕的是只是去服務(wù)端拉取資源而已，用戶訪問的還是原來的緩存，需要用戶再次刷新頁面才能從緩存中讀取新的資源。
這也是為什么我在
CACHE MANIFEST
# version 1.0.1
加了個(gè) version 的原因，因?yàn)槟愀牡娜魏?appcache 都會(huì)觸發(fā)清單文件重新去服務(wù)器拉取資源
2、如果更新的資源中有一個(gè)資源更新失敗了，將導(dǎo)致全部更新失敗，將用回上一版本的緩存。這更坑
3、manifest本身的編寫要求比較嚴(yán)格，要注意換行跟路徑文件名之類的問題。不然緩存將無效。
等等，所以慎用，慎用
總結(jié)：
介紹了幾種瀏覽器存儲(chǔ)方式，希望對(duì)你所有幫助，起碼有個(gè)大概了解也是可以的，在實(shí)際工作開發(fā)中要針對(duì)合適的場(chǎng)景選擇合適的存儲(chǔ)方式。