在瀏覽器查看
HTML4的本地存儲 cookie
瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式燎竖，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。
一脐供、cookie和session
cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式歇由。
區(qū)別：
1、保持狀態(tài)：cookie保存在瀏覽器端，session保存在服務(wù)器端
2、使用方式：
（1）cookie機(jī)制：如果不在瀏覽器中設(shè)置過期時(shí)間，cookie被保存在內(nèi)存中，生命周期隨瀏覽器的關(guān)閉而結(jié)束鸿市，這種cookie簡稱會話cookie。如果在瀏覽器中設(shè)置了cookie的過期時(shí)間，cookie被保存在硬盤中，關(guān)閉瀏覽器后，cookie數(shù)據(jù)仍然存在蒜魄，直到過期時(shí)間結(jié)束才消失。
Cookie是服務(wù)器發(fā)給客戶端的特殊信息榔昔，cookie是以文本的方式保存在客戶端诵肛，每次請求時(shí)都帶上它
（2）session機(jī)制：當(dāng)服務(wù)器收到請求需要?jiǎng)?chuàng)建session對象時(shí)，首先會檢查客戶端請求中是否包含sessionid。如果有sessionid锯岖，服務(wù)器將根據(jù)該id返回對應(yīng)session對象。如果客戶端請求中沒有sessionid，服務(wù)器會創(chuàng)建新的session對象吓歇，并把sessionid在本次響應(yīng)中返回給客戶端。通常使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器观游。如果用戶禁用cookie，則要使用URL重寫术荤，可以通過response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)；API對encodeURL的結(jié)束為，當(dāng)瀏覽器支持Cookie時(shí)阔逼，url不做任何處理未荒；當(dāng)瀏覽器不支持Cookie的時(shí)候迫卢，將會重寫URL將SessionID拼接到訪問地址后上荡。
3、存儲內(nèi)容：cookie只能保存字符串類型尤蛮，以文本的方式；session通過類似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來保存鸥滨，能支持任何類型的對象(session中可含有多個(gè)對象)
4卿吐、存儲的大薪嫔ァ：cookie：單個(gè)cookie保存的數(shù)據(jù)不能超過4kb；session大小沒有限制警儒。
5厌丑、安全性：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）綜上所述痪宰，攻擊者必須在短時(shí)間內(nèi)攻破加密的sessionID叼架，這很難。
6衣撬、應(yīng)用場景：
cookie：（1）判斷用戶是否登陸過網(wǎng)站乖订，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動登錄（或者記住密碼）。如果我們刪除cookie具练，則每次登錄必須從新填寫登錄的相關(guān)信息乍构。
（2）保存上次登錄的時(shí)間等信息。
（3）保存上次查看的頁面
（4）瀏覽計(jì)數(shù)
session：Session用于保存每個(gè)用戶的專用信息扛点，變量的值保存在服務(wù)器端哥遮，通過SessionID來區(qū)分不同的客戶。
（1）網(wǎng)上商城中的購物車
（2）保存用戶登錄信息
（3）將某些數(shù)據(jù)放入session中陵究，供同一用戶的不同頁面使用
（4）防止用戶非法登錄
7眠饮、缺點(diǎn)：cookie：（1）大小受限
（2）用戶可以操作（禁用）cookie，使功能受限
（3）安全性較低
（4）有些狀態(tài)不可能保存在客戶端铜邮。
（5）每次訪問都要傳送cookie給服務(wù)器仪召，浪費(fèi)帶寬。
（6）cookie數(shù)據(jù)有路徑（path）的概念牲距，可以限制cookie只屬于某個(gè)路徑下返咱。
session：（1）Session保存的東西越多，就越占用服務(wù)器內(nèi)存牍鞠，對于用戶在線人數(shù)較多的網(wǎng)站，服務(wù)器的內(nèi)存壓力會比較大评姨。
（2）依賴于cookie（sessionID保存在cookie）难述，如果禁用cookie，則要使用URL重寫吐句，不安全
（3）創(chuàng)建Session變量有很大的隨意性胁后，可隨時(shí)調(diào)用，不需要開發(fā)者做精確地處理嗦枢，所以攀芯，過度使用session變量將會導(dǎo)致代碼不可讀而且不好維護(hù)。
HTML5的本地存儲
解釋一
HTML5中與本地存儲相關(guān)的兩個(gè)重要內(nèi)容：Web Storage與本地?cái)?shù)據(jù)庫文虏。其中侣诺，Web Storage存儲機(jī)制是對HTML4中cookie存儲機(jī)制的一個(gè)改善殖演。由于cookie存儲機(jī)制有很多缺點(diǎn)，HTML5不再使用它年鸳，轉(zhuǎn)而使用改良后的Web Storage存儲機(jī)制趴久。本地?cái)?shù)據(jù)庫是HTML5中新增的一個(gè)功能，使用它可以在客戶端本地建立一個(gè)數(shù)據(jù)庫搔确，原本必須保存在服務(wù)器端數(shù)據(jù)庫中的內(nèi)容現(xiàn)在可以直接保存在客戶端本地了彼棍，這大大減輕了服務(wù)器端的負(fù)擔(dān)，同時(shí)也加快了訪問數(shù)據(jù)的速度膳算。
本文主要來講解Web Storage
我們知道座硕，在HTML4中可以使用cookie在客戶端保存諸如用戶名等簡單的用戶信息，但是涕蜂，通過長期的使用华匾，你會發(fā)現(xiàn)，用cookie存儲永久數(shù)據(jù)存在以下幾個(gè)問題：
1.大杏畲小：cookie的大小被限制在4KB瘦真。
2.帶寬：cookie是隨HTTP事務(wù)一起被發(fā)送的，因此會浪費(fèi)一部分發(fā)送cookie時(shí)使用的帶寬黍瞧。
3.復(fù)雜性：要正確的操縱cookie是很困難的诸尽。
針對這些問題，在HTML5中印颤，重新提供了一種在客戶端本地保存數(shù)據(jù)的功能您机，它就是Web Storage。
具體來說年局，Web Storage又分為兩種：
1.sessionStorage：將數(shù)據(jù)保存在session對象中际看。所謂session，是指用戶在瀏覽某個(gè)網(wǎng)站時(shí)矢否，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過的這段時(shí)間仲闽，也就是用戶瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。session對象可以用來保存在這段時(shí)間內(nèi)所要求保存的任何數(shù)據(jù)僵朗。
2.localStorage：將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備(通常指硬盤赖欣，也可以是其他硬件設(shè)備)中，即使瀏覽器被關(guān)閉了验庙，該數(shù)據(jù)仍然存在顶吮，下次打開瀏覽器訪問網(wǎng)站時(shí)仍然可以繼續(xù)使用。
這兩者的區(qū)別在于粪薛，sessionStorage為臨時(shí)保存悴了，而localStorage為永久保存。
到目前為止，F(xiàn)irefox3.6以上湃交、Chrome6以上熟空、Safari 5以上、Pera10.50以上巡揍、IE8以上版本的瀏覽器支持sessionStorage與localStorage的使用痛阻。
解釋二
WebStorage的目的是克服由cookie所帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí)腮敌，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器阱当。
WebStorage兩個(gè)主要目標(biāo)：（1）提供一種在cookie之外存儲會話數(shù)據(jù)的路徑。（2）提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制糜工。
HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）弊添。
1、生命周期：localStorage:localStorage的生命周期是永久的捌木，關(guān)閉頁面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會消失油坝。localStorage除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會消失刨裆。
sessionStorage的生命周期是在僅在當(dāng)前會話下有效澈圈。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)帆啃。只要這個(gè)瀏覽器窗口沒有關(guān)閉瞬女，即使刷新頁面或者進(jìn)入同源另一個(gè)頁面，數(shù)據(jù)依然存在努潘。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀诽偷。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁面，sessionStorage也是不一樣的疯坤。
2报慕、存儲大小：localStorage和sessionStorage的存儲數(shù)據(jù)大小一般都是：5MB
3压怠、存儲位置：localStorage和sessionStorage都保存在客戶端眠冈，不與服務(wù)器進(jìn)行交互通信。
4菌瘫、存儲內(nèi)容類型：localStorage和sessionStorage只能存儲字符串類型洋闽，對于復(fù)雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
5、獲取方式：localStorage：window.localStorage;突梦；sessionStorage：window.sessionStorage;。
6羽利、應(yīng)用場景：localStoragese：常用于長期登錄（+判斷用戶是否已登錄）宫患，適合長期保存在本地的數(shù)據(jù)。sessionStorage：敏感賬號一次性登錄这弧；
WebStorage的優(yōu)點(diǎn)：
（1）存儲空間更大：cookie為4KB娃闲，而WebStorage是5MB虚汛；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會傳送到服務(wù)器，存儲在本地的數(shù)據(jù)可以直接獲取皇帮，也不會像cookie一樣美詞請求都會傳送到服務(wù)器卷哩，所以減少了客戶端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量属拾；
（3）對于那種只需要在用戶瀏覽一組頁面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)将谊，sessionStorage會非常方便；
（4）快速顯示：有的數(shù)據(jù)存儲在WebStorage上渐白，再加上瀏覽器本身的緩存尊浓。獲取數(shù)據(jù)時(shí)可以從本地獲取會比從服務(wù)器端獲取快得多，所以速度更快纯衍；
（5）安全性：WebStorage不會隨著HTTP header發(fā)送到服務(wù)器端栋齿，所以安全性相對于cookie來說比較高一些，不會擔(dān)心截獲襟诸，但是仍然存在偽造問題瓦堵；
（6）WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便歌亲；
setItem (key, value) —— 保存數(shù)據(jù)菇用，以鍵值對的方式儲存信息。
getItem (key) —— 獲取數(shù)據(jù)应结，將鍵值傳入刨疼，即可獲取到對應(yīng)的value值。
removeItem (key) —— 刪除單個(gè)數(shù)據(jù)鹅龄，根據(jù)鍵值移除對應(yīng)的信息揩慕。
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key
cookie 、sessionStorage與localStorage的區(qū)別
sessionStorage與localStorage的使用示例扮休。
首先迎卤，準(zhǔn)備一個(gè)用來保存數(shù)據(jù)和顯示數(shù)據(jù)的網(wǎng)頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Storage 示例</title>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存數(shù)據(jù)" onclick="saveStorage('input');" />
<input type="button" value="讀取數(shù)據(jù)" onclick="loadStorage('msg');" />
</body>
</html>
單擊"保存數(shù)據(jù)"按鈕時(shí)調(diào)用saveStorage方法保存數(shù)據(jù)，單擊"讀取數(shù)據(jù)"按鈕時(shí)調(diào)用loadStorage方法調(diào)用數(shù)據(jù)玷坠，這兩個(gè)方法均在腳本文件script.js中蜗搔，如下：
//sessionStorage 示例 (保存一個(gè)會話周期:從打開瀏覽器——到關(guān)閉瀏覽器窗口)
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str);
//或者sessionStorage.message=str;
}
function loadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
//或者var msg=sessionStorage.message;
target.innerHTML=msg;
}
//localStorage 示例(可永久保存)
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
localStorage.setItem("message",str);
//或者localStorage.message=str;
}
function loadStorage(id){
var target=document.getElementById("msg");
var msg=localStorage.getItem("message");
//或者var msg=localStorage.message;
target.innerHTML=msg;
}
這個(gè)腳本文件分別使用了sessionStorage與localStorage兩種方法。這兩種方法都是當(dāng)用戶在input文本框中輸入內(nèi)容后單擊"保存數(shù)據(jù)"按鈕保存數(shù)據(jù)八堡，單擊"讀取數(shù)據(jù)"按鈕讀取保存后的數(shù)據(jù)樟凄。但是兩種方法對數(shù)據(jù)的處理方式不一樣，在使用sessionStorage方法時(shí)兄渺，如果關(guān)閉了瀏覽器缝龄，這個(gè)數(shù)據(jù)就丟失了，下一次打開瀏覽器單擊"讀取數(shù)據(jù)"按鈕時(shí)，讀取不到任何數(shù)據(jù)叔壤。在使用localStorage方法時(shí)瞎饲，即使瀏覽器關(guān)閉了，下次打開瀏覽器時(shí)仍然能夠讀取保存的數(shù)據(jù)炼绘。不過嗅战，數(shù)據(jù)保存是按不同的瀏覽器分別進(jìn)行保存的，也就是說俺亮，打開別的瀏覽器是讀取不到在這個(gè)瀏覽器中保存的數(shù)據(jù)的驮捍。
下面具體看一下讀寫數(shù)據(jù)時(shí)使用的基本方法
(1)sessionStorage
保存數(shù)據(jù)的方法：
sessionStorage.setItem("key","value");
//或者寫成
sessionStorage.key="value";
讀取數(shù)據(jù)的方法：
變量=sessionStorage.getItem("key");
//或者寫成
變量=sessionStorage.key;
(2)localStorage
保存數(shù)據(jù)的方法：
localStorage.setItem("key","value");
//或者寫成
localStorage.key="value";
讀取數(shù)據(jù)的方法：
變量=localStorage.getItem("key");
//或者寫成
變量=localStorage.key;
在保存數(shù)據(jù)時(shí)，若使用sessionStorage讀取或保存數(shù)據(jù)铅辞，則使用sessionStorage對象并調(diào)用該對象的讀寫方法厌漂；若使用localStorage讀取或保存數(shù)據(jù)，則使用localStorage對象并調(diào)用該對象的讀寫方法斟珊。
在進(jìn)行讀寫時(shí)苇倡，不管是哪個(gè)對象，都可以通過該對象的getItem方法來讀取數(shù)據(jù)囤踩，也可以該對象的自定義屬性值讀取數(shù)據(jù)旨椒；可以通過該對象的setItem方法保存數(shù)據(jù)，也可以通過該對象的自定義屬性值保存數(shù)據(jù)堵漱。保存數(shù)據(jù)時(shí)按“鍵名/鍵值”的形式進(jìn)行保存综慎。當(dāng)通過該對象的getItem方法讀取數(shù)據(jù)時(shí)，將參數(shù)指定為鍵名勤庐，該方法返回鍵值示惊；當(dāng)通過該對象的自定義屬性值讀取數(shù)據(jù)時(shí)，可以將該對象的某個(gè)自定義屬性名作為鍵名愉镰，訪問該自定義屬性的屬性值即可得到鍵值米罚；當(dāng)通過該對象的setItem方法保存數(shù)據(jù)時(shí)，將第一個(gè)參數(shù)指定為鍵名丈探，將第二個(gè)參數(shù)指定為鍵值录择；當(dāng)通過該對象的自定義屬性值保存數(shù)據(jù)時(shí)，可以將該對象的某個(gè)自定義屬性名作為鍵名碗降，然后直接將該自定義屬性值設(shè)置為鍵值隘竭。
在保存數(shù)據(jù)時(shí)不允許重復(fù)保存相同的鍵名。保存后可以修改鍵值讼渊，但不允許修改鍵名(只能重新取鍵名动看，然后再保存鍵值)。
最后爪幻，這個(gè)示例在瀏覽器中的運(yùn)行結(jié)果如下：
轉(zhuǎn)載自:pengc博客園
