什麼是本地存儲？

本地存儲

 

HTTP協議

http：超文本傳輸協議

https：超文本傳輸安全協議

 

http協議的一個特色是無狀態，同一個客戶端的此次請求和上次請求沒有對應關係。

對http服務器來講，它並不知道這兩個請求來自同一個客戶端。

爲了解決這個問題， Web程序引入了cookie機制來維護狀態。

 

 

 

cookie是什麼

 

cookie是瀏覽器提供的一種機制，能夠由JavaScript對其進行操做(設置、讀取、刪除)

cookie是一種會話跟蹤技術，是存儲於訪問者計算機中的一小塊數據

 

會話：用戶進入網站，開始瀏覽信息到關閉瀏覽器的過程，就稱之爲是一次會話

會話跟蹤技術：瀏覽器和服務器之間在進行屢次請求間共享數據的過程，就稱爲會話跟蹤技術

 

cookie的特性

cookie能夠實現跨頁面全局變量

cookie能夠跨越同域名下的多個網頁，但不能跨域使用

cookie會隨着HTTP請求發送給服務器

cookie會存儲於訪問者的計算機中

同一個網站中全部頁面共享一套cookie

能夠設置有效期限

存儲空間爲4KB左右

 

cookie應用場景

* 會話狀態管理（如用戶登陸狀態、購物車等）

* 個性化設置（保存用戶設置的樣式等）

* 瀏覽器行爲跟蹤（如跟蹤分析用戶行爲等）

 

cookie的缺點

cookie可能被禁用

cookie與瀏覽器相關，不能互相訪問

cookie可能被用戶刪除

cookie安全性不夠高

cookie會隨着HTTP請求發送給服務器

cookie存儲空間很小(只有4KB左右)

cookie操做麻煩，沒有方便的API

 

操做cookie

每一個cookie都是一個鍵/值對格式的字符串(key=value)

 

設置cookie：

document.cookie="user1=xh";

document.cookie="user2=xm";

若是要改變一個cookie的值，只能從新賦值

 

設置有效期：

var d=new Date();

d.setDate(d.getDate()+3); //按天數設置

document.cookie="user3=xd; expires="+d;

 

 

讀取cookie：

var cookies = document.cookie;

只可以一次獲取全部的cookie值

使用時必須本身解析這個字符串，來獲取指定的cookie值

 

 

刪除cookie：

cookie過時會自動消失

要刪除一個cookie，可將其有效期設爲一個過去的時間

var d=new Date();

d.setDate(d.getDate()-1);

document.cookie="user1=xh; expires="+d;

 

 

HTML5本地存儲

 

H5本地存儲有 localStorage 與 sessionStorage 兩種

 

優勢：

更大的存儲空間，有5MB左右

不會隨HTTP請求發送給服務器

有方便的API操做

移動端普及高

 

兼容狀況:

 

localStorage 爲永久性保存數據，不會隨着瀏覽器的關閉而消失。

按域名進行存儲，能夠在同域名下跨頁面訪問，不會和其餘域名衝突。

按鍵值對存儲：key/value

 

操做：

localStorage.setItem(key , value) 保存或設置數據

若是key已經存在，則覆蓋key對應的value

若是不存在則添加key與value

 

localStorage.getItem(key) 獲取key對應的value

若是key不存在則返回null

 

localStorage.key(index) 獲取指定下標位置的key

 

localStorage.length 獲取數據條數（長度）

 

配合key(index)方法能夠實現遍歷localStorage數據的方法

 

localStorage.clear() 將同域名下的全部數據都清空

 

localStorage.removeItem('key') 刪除某個鍵值對

 

sessionStorage 爲臨時性保存數據，當頁面關閉就會消失

sessionStorage 不能跨頁面訪問，只侷限在當前的標籤頁

sessionStorage 各類操做與 localStorage 同樣

 

 

JSON

 

目前 JavaScript 使用很是多的 json 格式

 

可使用 JSON.stringify() 將 json對象 轉爲 json字符串

而後把 json字符串 存儲在 cookie 或 localStorage 裏面

 

讀取出來之後使用 JSON.parse() 將 json字符串 轉爲 json對象

 

示例：

var jsonObj = {"name1":"jack","name2":"lily"};

localStorage.setItem("user",JSON.stringify(jsonObj)); // 存儲

 

var jsonObj = JSON.parse(localStorage.getItem("user")); // 讀取