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

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

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)用實例，訪問地址為 http://%s:%s", host, port)
});

服務(wù)端接受GET請求咱們打印出響應(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ā)送個請求，客戶端就會把設(shè)置的 cookie 給帶了過去，cookie數(shù)據(jù)會自動在web服務(wù)器和web瀏覽器之間傳輸

保存 cookie

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

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

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

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

讀取 cookie

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

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屬性來配置不同的作用域。
默認情況
默認情況下在下面頁面創(chuàng)建了cookie,那么該cooki對頁面同目錄或子目錄是可見的，如下頁面創(chuàng)建了cookie：
http://www.example.com/src/index.html
那么該cookie對下面的頁面是可見的：
http://www.example.com/src/index2.html
http://www.example.com/src/A/index.html
http://www.example.com/src/B/C/index.html

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

path 改變作用域
前面也講了，默認情況下哪個頁面創(chuàng)建了cookie,那么該cooki對頁面同目錄或子目錄是可見的。那要是我們有個需求是：用戶在這個頁面添加的表單數(shù)據(jù)在整個網(wǎng)站都可以用（包括它的父級頁面）。
那就需要利用 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 了！
進一步修改path：
document.cookie ="path="+"/"；   // 設(shè)置路徑
現(xiàn)在是該cookie對任何 http://www.example.com 這臺服務(wù)器可見了！
發(fā)現(xià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 默認是以不安全的形式（通過普通的，不安全的 HTTP 鏈接）傳遞的。
設(shè)置 secure：
document.cookie ="secure="+true"   
那么 cookie 只能在 HTTPS 或其他安全協(xié)議鏈接的時候它才能傳遞。
三、離線Web儲存
localStorage和sessionStorage 只是保存了 web應(yīng)用程序相關(guān)的數(shù)據(jù)，要是我們想要保存比如圖片、
css 、js等文件 ，是否能做到呢。
1、appcache
HTML5新增了‘應(yīng)用程序緩存’，配合一份緩存清單，就可實現(xiàn)比如圖片、css 、js等文件的緩存，甚至做到
離線web應(yīng)用。
下面以一個例子講述：
項目文件：

index.html: 在 



    
    
    








其中 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 測試";
}
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 和圖片都是正常顯示的，但這時是從磁盤上獲取的文件，而不是網(wǎng)絡(luò)上。

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