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

接著想服務端隨便發送一個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("應用實例，訪問地址為 http://%s:%s", host, port)
});

服務端接受GET請求咱們打印出響應頭看看：

-------------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---------

有沒有看到雖然咱們客戶端隨便發送個請求，客戶端就會把設置的 cookie 給帶了過去，cookie數據會自動在web服務器和web瀏覽器之間傳輸

保存 cookie

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

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

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

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

讀取 cookie

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

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屬性來配置不同的作用域。
默認情況
默認情況下在下面頁面創建了cookie,那么該cooki對頁面同目錄或子目錄是可見的，如下頁面創建了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 改變作用域
前面也講了，默認情況下哪個頁面創建了cookie,那么該cooki對頁面同目錄或子目錄是可見的。那要是我們有個需求是：用戶在這個頁面添加的表單數據在整個網站都可以用（包括它的父級頁面）。
那就需要利用 cookie的path 屬性了，如：
cookie是在以下頁面所創建的：
http://www.example.com/A/B/index.html

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

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 ，并且咱們的網頁，css js 和圖片都是正常顯示的，但這時是從磁盤上獲取的文件，而不是網絡上。

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