Javascript本地存儲小結

前言

總括：詳細講述Cookie,LocalStorge,SesstionStorge的區別和用法。

人生如畫，歲月如歌。

原文博客地址：Javascript本地存儲小結

知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

1. 各類存儲方案的簡單對比

• Cookies：瀏覽器均支持，容量爲4KB

• UserData：僅IE支持，容量爲64KB

• Flash：100KB，非HTML原生，須要插件支持

• Google Gears SQLite ：須要插件支持，容量無限制

• LocalStorage：HTML5，容量爲5M

• SesstionStorage：HTML5，容量爲5M

• globalStorage：Firefox獨有的，Firefox13開始就再也不支持這個方法

UserData僅IE支持， Google Gears SQLite須要插件，Flash已經伴隨着HTML5的出現漸漸退出了歷史舞臺，所以今天咱們的主角只有他們三個：Cookie,LocalStorge,SesstionStorge;

2. Cookie

做爲一個前端和Cookie打交道的次數確定不會少了，Cookie算是比較古老的技術了
1993 年，網景公司僱員 Lou Montulli 爲了讓用戶在訪問某網站時，進一步提升訪問速度，同時也爲了進一步實現我的化網絡，發明了今天普遍使用的 Cookie。

2.1 Cookie的特色

咱們先來看下Cookie的特色：

• 1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或郵件那樣的大數據。

• 2）只要有請求涉及cookie，cookie就要在服務器和瀏覽器之間來回傳送（這解釋爲何本地文件不能測試cookie）。並且cookie數據始終在同源的http請求中攜帶（即便不須要），這也是Cookie不能太大的重要緣由。正統的cookie分發是經過擴展HTTP協議來實現的，服務器經過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie。

• 3）用戶每請求一次服務器數據，cookie則會隨着這些請求發送到服務器，服務器腳本語言如PHP等可以處理cookie發送的數據，能夠說是很是方便的。固然前端也是能夠生成Cookie的，用js對cookie的操做至關的繁瑣，瀏覽器只提供document.cookie這樣一個對象，對cookie的賦值，獲取都比較麻煩。而在PHP中，咱們能夠經過setcookie()來設置cookie，經過$_COOKIE這個超全局數組來獲取cookie。

cookie的內容主要包括：名字，值，過時時間，路徑和域。路徑與域一塊兒構成cookie的做用範圍。若不設置過時時間，則表示這個cookie的生命期爲瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie。會話cookie通常不存儲在硬盤上而是保存在內存裏，固然這種行爲並非規範規定的。若設置了過時時間，瀏覽器就會把cookie保存到硬盤上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過時時間。存儲在硬盤上的cookie能夠在不一樣的瀏覽器進程間共享，好比兩個IE窗口。而對於保存在內存裏的cookie，不一樣的瀏覽器有不一樣的處理方式。

2.2 Session

說到Cookie就不能不說Session。

Session機制。session機制是一種服務器端的機制，服務器使用一種相似於散列表的結構（也可能就是使用散列表）來保存信息。當程序須要爲某個客戶端的請求建立一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識（稱爲session id），若是已包含則說明之前已經爲此客戶端建立過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），若是客戶端請求不包含session id，則爲此客戶端建立一個session而且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式能夠採用cookie，這樣在交互過程當中瀏覽器能夠自動的按照規則把這個標識發送給服務器。通常這個cookie的名字都是相似於SEEESIONID。但cookie能夠被人爲的禁止，則必須有其餘機制以便在cookie被禁止時仍然可以把session id傳遞迴服務器。常常被使用的一種技術叫作URL重寫，就是把session id直接附加在URL路徑的後面。好比：http://damonare.cn?sessionid=123456還有一種技術叫作表單隱藏字段。就是服務器會自動修改表單，添加一個隱藏字段，以便在表單提交時可以把session id傳遞迴服務器。好比：

<form name="testform" action="/xxx">
    <input type="hidden" name="sessionid" value="123456">
    <input type="text">
</form>

實際上這種技術能夠簡單的用對action應用URL重寫來代替。

2.3 Cookie和Session簡單對比

Cookie和Session 的區別：

• 1）cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

• 2）cookie不是很安全，別人能夠分析存放在本地的cookie並進行cookie欺騙，考慮到安全應當使用session。

• 3）session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用cookie。

• 4）單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

• 5）因此建議：

  • 將登錄信息等重要信息存放爲SESSION

  • 其餘信息若是須要保留，能夠放在cookie中

2.4 document.cookie的屬性

expires屬性

指定了coolie的生存期，默認狀況下coolie是暫時存在的，他們存儲的值只在瀏覽器會話期間存在，當用戶推出瀏覽器後這些值也會丟失，若是想讓cookie存在一段時間，就要爲expires屬性設置爲將來的一個過時日期。如今已經被max-age屬性所取代，max-age用秒來設置cookie的生存期。

path屬性

它指定與cookie關聯在一塊兒的網頁。在默認的狀況下cookie會與建立它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。

domain屬性

domain屬性可使多個web服務器共享cookie。domain屬性的默認值是建立cookie的網頁所在服務器的主機名。不能將一個cookie的域設置成服務器所在的域以外的域。例如讓位於order.damonare.cn的服務器可以讀取catalog.damonare.cn設置的cookie值。若是catalog.damonare.cn的頁面建立的cookie把本身的path屬性設置爲「/」，把domain屬性設置成「.damonare.cn」，那麼全部位於catalog.damonare.cn的網頁和全部位於orlders.damonare.cn的網頁，以及位於damonare.cn域的其餘服務器上的網頁均可以訪問這個cookie。

secure屬性

它是一個布爾值，指定在網絡上如何傳輸cookie，默認是不安全的，經過一個普通的http鏈接傳輸

2.5 cookie實戰

這裏咱們使用javascript來寫一段cookie,借用w3cschool的demo:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

注意這裏對Cookie的生存期進行了定義，也就是355天

3. localStorage

這是一種持久化的存儲方式，也就是說若是不手動清除，數據就永遠不會過時。

它也是採用Key - Value的方式存儲數據，底層數據接口是sqlite，按域名將數據分別保存到對應數據庫文件裏。它能保存更大的數據（IE8上是10MB，Chrome是5MB），同時保存的數據不會再發送給服務器，避免帶寬浪費。

3.1 localStorage的屬性方法

下表是localStorge的一些屬性和方法

屬性方法	說明
localStorage.length	得到storage中的個數
localStorage.key(n)	得到storage中第n個元素對的鍵值（第一個元素是0）
localStorage.getItem(key)	獲取鍵值key對應的值
localStorage.key	獲取鍵值key對應的值
localStorage.setItem(key, value)	添加數據，鍵值爲key，值爲value
localStorage.removeItem(key)	移除鍵值爲key的數據
localStorage.clear()	清除全部數據

3.2 localStorage的缺點

• ① localStorage大小限制在500萬字符左右，各個瀏覽器不一致

• ② localStorage在隱私模式下不可讀取

• ③ localStorage本質是在讀寫文件，數據多的話會比較卡（firefox會一次性將數據導入內存，想一想就以爲嚇人啊）

• ④ localStorage不能被爬蟲爬取，不要用它徹底取代URL傳參

4. sessionStorage

和服務器端使用的session相似，是一種會話級別的緩存，關閉瀏覽器會數據會被清除。不過有點特別的是它的做用域是窗口級別的，也就是說不一樣窗口間的sessionStorage數據不能共享的。使用方法（和localStorage徹底相同）：

屬性方法	說明
sessionStorage.length	得到storage中的個數
sessionStorage.key(n)	得到storage中第n個元素對的鍵值（第一個元素是0）
sessionStorage.getItem(key)	獲取鍵值key對應的值
sessionStorage.key	獲取鍵值key對應的值
sessionStorage.setItem(key, value)	添加數據，鍵值爲key，值爲value
sessionStorage.removeItem(key)	移除鍵值爲key的數據
sessionStorage.clear()	清除全部數據

5. sessionStorage和localStorage的區別

• sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。當用戶關閉瀏覽器窗口後，數據立馬會被刪除。

• localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。次日、第二週或下一年以後，數據依然可用。

5.1 測試

sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

測試過程：咱們在控制檯輸入上述代碼查看打印結果

控制檯首次輸入代碼：

關閉窗口，控制檯再次輸入代碼：

所謂的關閉窗口即銷燬，就是這樣，關閉窗口從新打開輸入代碼輸出結果仍是上面圖片的樣子，也就是說關閉窗口後sessionStorage.pagecount即被銷燬，除非重心建立。或者從歷史記錄進入纔會相關數據纔會存在。好的，咱們再來看下localStorge表現：

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制檯首次輸入代碼：

關閉窗口，控制檯再次輸入代碼：

6. web Storage和cookie的區別

Web Storage(localStorage和sessionStorage)的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生

後記

博主儘量思路清晰的理了一遍cookie，session，localStorage，sessionStorage之間的區別和聯繫，但願能夠幫到你們。

參考文章：

• cookie 和session 的區別詳解