6.cookie、session，localStorage、sessionStorage

必須在服務器下運行

cookie/session 存東西

cookie 時間 過時時間 4k 服務器把一部分數據保存在客戶端（瀏覽器）

session 回話 時間 服務器存取用戶信息

5M
localStorage 永久存儲
sessionStorage 跟cookie同樣, 至關於沒有設置過時時間的cookie
只能存在一個tab頁面

設置：

localStorage.屬性名=值
localStorage.setItem(屬性名，值);

獲取
localStorage.屬性名
localStorage.getItem(屬性名);

刪除
delete localStorage.屬性名
localStorage.removeItem(屬性名);

刪除全部
localStorage.clear();

屬性長度
localStorage.length

cookie:

cookie: cookie-parser 解析cookie

下載:cnpm i cookie-parser

設置cookie

res.cookie(name,value,{path,expires,maxAge,signed});

獲取cookie

res.cookies

res.signedCookies -- >簽名 app.use(cookieParser(secret));

req.secret = "簽名"

刪除cookie

res.clearCookie(name);必須有name

session:

session: cookie-session/express-session

下載:npm i cookie-session express-session

app.use(cookieSession({name,keys[],maxAge}));

app.use(expressSession({
  secret: 'dsafdsadsfasfdsafasdsa',
  resave: false,
  saveUninitialized: true,
  cookie: { /*secure: true,*/maxAge: 60000  }
}))

req.session

---

cookie.js

var express = require("express");
var cookieParser = require("cookie-parser");
var app = express();
app.listen(9000);

app.use(cookieParser("dsfdsafsafdsafdsafdsa"));//req.secret
//密鑰
//req.secret = "dsfdsafsafdsafdsafdsa";
app.use("/",function(req,res){
    //刪除cookie 必須帶名字 簽名和未簽名的均可以刪除
    res.clearCookie("pass");
    
    
    
    //設置cookie
    //res.cookie("user","user"+Math.random());
    //設置帶簽名的cookie
    //res.cookie("pass","pass"+Math.random(),{signed:true}); 
    
    
    //獲取
    console.log(1,req.cookies);//獲取不帶簽名cookie
    
    console.log(2,req.signedCookies);//獲取帶簽名cookie
    
    res.send("cookie:" + Math.random());    
});

session.js

var express = require("express");
var cookieParser = require("cookie-parser");
var expressSession = require("express-session");
var app = express();
app.listen(9000);

app.use(cookieParser());
app.use(expressSession({
  secret: 'dsafdsadsfasfdsafasdsa',
  resave: false,
  saveUninitialized: true,
  cookie: { /*secure: true,*/maxAge: 60000  }
}))

//判斷是否登陸
app.get("/index",function(req,res){
    console.log(req.originalUrl,req.session.isLogin);
    if(req.session.isLogin){
        res.send("index.html");
    }else {
        res.redirect("/login"); 
    }
});
//判斷是否登陸
app.get("/list",function(req,res){
    console.log(req.originalUrl,req.session.isLogin);
    if(req.session.isLogin){
        res.send("list.html");
    }else {
        res.redirect("/login"); 
    }
});
//登錄後在session價格屬性
app.get("/login",function(req,res){
    req.session.isLogin = true;
    
    console.log(req.originalUrl,req.session.isLogin);
    res.send("login.html");
});

---

localStroage

寫在前端:js:

<script>
設置:
localStorage.a = 12;


獲取:(傳的是字符串)
/*localStorage.json = JSON.stringify({a:12,b:5});

var json = JSON.parse(localStorage.json);

alert(json.a + json.b);*/ 

localStorage.a = 12;

localStorage.setItem("b",5);

alert(localStorage.a);

alert(localStorage.getItem("b"));


刪除:
localStorage.a = 12;
localStorage.b = "b";
//模塊方法
localStorage.removeItem("a");

//原生方法:
delete localStorage.a;


刪除全部:        
localStorage.clear();     


屬性長度:localStorage.length   

localStorage.a = 12;
localStorage.b = 1;
localStorage.c = 2;

//alert(localStorage.length);//3

for(var i in localStorage){
    //i 0 1 2   a b c
    console.log(i ,localStorage[i]);
}
</script>

sessionStroage

寫在前端的js:

<script>
/*sessionStorage.a = 12;
sessionStorage.b = 1;
sessionStorage.c = 2;
sessionStorage.setItem("d","d");*/
alert(sessionStorage.getItem("d"));

alert(sessionStorage.length);
</script>

淺談session、cookie,sessionStorage、localStorage的區別及應用場景

瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端上的方式，能夠利用cookie,session等跟服務端進行數據交互。

1、cookie和session

cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。

區別：

一、保持狀態：

cookie保存在瀏覽器端，session保存在服務器端

二、使用方式：

（1）cookie機制：若是不在瀏覽器中設置過時時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱會話cookie。若是在瀏覽器中設置了cookie的過時時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過時時間結束才消失。
Cookie是服務器發給客戶端的特殊信息，cookie是以文本的方式保存在客戶端，每次請求時都帶上它
（2）session機制：當服務器收到請求須要建立session對象時，首先會檢查客戶端請求中是否包含sessionid。若是有sessionid，服務器將根據該id返回對應session對象。若是客戶端請求中沒有sessionid，服務器會建立新的session對象，並把sessionid在本次響應中返回給客戶端。一般使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。若是用戶禁用cookie，則要使用URL重寫，能夠經過response.encodeURL(url) 進行實現；API對encodeURL的結束爲，當瀏覽器支持Cookie時，url不作任何處理；當瀏覽器不支持Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。

三、存儲內容：

==cookie==只能保存字符串類型，以文本的方式；==session==經過相似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象)

四、存儲的大小：

==cookie==：單個cookie保存的數據不能超過4kb；==session==大小沒有限制。

五、安全性：

cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。
緣由以下：
（1）sessionID存儲在cookie中，若要攻破session首先要攻破cookie；
（2）sessionID是要有人登陸，或者啓動session_start纔會有，因此攻破cookie也不必定能獲得sessionID；
（3）第二次啓動session_start後，前一次的sessionID就是失效了，session過時後，sessionID也隨之失效。
（4）sessionID是加密的
（5）綜上所述，攻擊者必須在短期內攻破加密的sessionID，這很難。

六、應用場景：

==cookie==：
（1）判斷用戶是否登錄過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）。若是咱們刪除cookie，則每次登陸必須重新填寫登陸的相關信息。
（2）保存上次登陸的時間等信息。
（3）保存上次查看的頁面
（4）瀏覽計數

==session==：
Session用於保存每一個用戶的專用信息，變量的值保存在服務器端，經過SessionID來區分不一樣的客戶。
（1）網上商城中的購物車
（2）保存用戶登陸信息
（3）將某些數據放入session中，供同一用戶的不一樣頁面使用
（4）防止用戶非法登陸

七、缺點：

==cookie==：
（1）大小受限
（2）用戶能夠操做（禁用）cookie，使功能受限
（3）安全性較低
（4）有些狀態不可能保存在客戶端。
（5）每次訪問都要傳送cookie給服務器，浪費帶寬。
（6）cookie數據有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

session：
（1）Session保存的東西越多，就越佔用服務器內存，對於用戶在線人數較多的網站，服務器的內存壓力會比較大。
（2）依賴於cookie（sessionID保存在cookie），若是禁用cookie，則要使用URL重寫，不安全
（3）建立Session變量有很大的隨意性，可隨時調用，不須要開發者作精確地處理，因此，過分使用session變量將會致使代碼不可讀並且很差維護。

2、WebStorage

WebStorage的目的是克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器。
WebStorage兩個主要目標：
（1）提供一種在cookie以外存儲會話數據的路徑。
（2）提供一種存儲大量能夠跨會話存在的數據的機制。
HTML5的WebStorage提供了兩種API：
localStorage（本地存儲）和sessionStorage（會話存儲）。

一、生命週期：

localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。localStorage除非主動刪除數據，不然數據永遠不會消失。
sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即便刷新頁面或者進入同源另外一個頁面，數據依然存在。可是sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不同的。

二、存儲大小：

localStorage和sessionStorage的存儲數據大小通常都是：5MB

三、存儲位置：

localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊。

四、存儲內容類型：

localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可使用ECMAScript提供的JSON對象的stringify和parse來處理

五、獲取方式：

localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

六、應用場景：

localStoragese：經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。
sessionStorage：敏感帳號一次性登陸；
==WebStorage的優勢==：
（1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；
（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣美詞請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；
（3）對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；
（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；
（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；
（6）WebStorage提供了一些方法，數據操做比cookie方便；

setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。
        getItem (key) ——  獲取數據，將鍵值傳入，便可獲取到對應的value值。     
      　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。
      　clear () ——  刪除全部的數據       
      　key (index) —— 獲取某個索引的key

我是向着遠方獨行的浪子