資料儲存

morra發表於2016-12-28

1.1 cookie的組成部分

組成 註釋
name 名稱
value 值
expires（可選） 過期時間
path（可選） 路徑
domain（可選） 域
secure（可選） 安全性
1.1.1 name和value

name和value是cookie必選的部分，且必須在cookie字串的開頭。其中分號是用作不同部分的分隔符，而不會儲存在其值中。並且cookie預設是不儲存類似特殊符號的，除非使用編碼。

//如果沒有設定生存期，預設情況下cookie會在瀏覽器被關閉後過期
document.cookie = "UserName=Morra;";
1.1.2 expires

//過期時間的格式與toUTCString()的格式相同

//一般情況下name,value,expires這三部分用的比較多
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;";
//把過期時間設定為6周後
var expires = new Date();
 expires.setMonth(expires.getMonth()+6); 
document.cookie = "UserName=Morra;expires="+expires.toUTCString()+";";

注意：當使用者刪除了cookie或者cookie數量達到上限，cookie會在過期日期之前就失效。

1.1.3 path

path屬性是區分大小寫的。

document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=/mysite;";

cookie是在不同域中當然是不能互訪的，並且在同一個域的不同目錄（前提是同級目錄）也是不能互訪。比如
www.google.com/morra與ww.google.com/jack的cookie也是不能互訪的，但是path目錄的子目錄之間的cookie是可以互訪的，如下：

//ww.google.com/mysite/jack與ww.google.com/mysite/morra之間的cookie是可以互訪的
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=ww.google.com/mysite;";
1.1.4 domain

與path類似，用於隔離域之間的cookie互訪。一般情況下二級域名之間的cookie是不能互訪的，但是當domain屬性設定為一個一級域名後，其二級域名之間的cookie就能夠互訪了。

//a.google.com與b.google.com之間的cookie能夠互訪。
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=/mysite;domain=google.com;";
1.1.5 secure

secure屬性是一個布林值。預設為false。如果設為true，則cookie只會傳送給嘗試使用安全通道檢索它的web伺服器，一般在SSL中用的比較多。

1.2 應用cookie

編寫setCookie()函式來輔助我們進行cookie的設定：

function setCookie(name, value, path, expires) {
    value = escape(value);  //能把特殊轉換為Latin-1字符集中對應的16進位制編碼，並加上%字首
 
    if (!expires) {  //如果過期日期為空則，預設把其設定為6個月後過期，
        var now = new Date();
        now.setMonth(now.getMonth() + 6);
        expires = now.toUTCString();
    }
 
 
    if (path) {//path是可選的，如果有path，就把路徑加上";Path="字首
        path = ";path=" + path;
    }
 
    document.cookie = name + "=" + value + ";expires=" + expires + path;       //cookie字串格式化
}
 
//建立了4個cookie
setCookie("UserName", "Morra");
 
setCookie("Age", "25");
 
setCookie("FirstVisit", "28 Dec 2016");
 
var expires = new Date();
expires.setMonth(expires.getMonth() + 12);
setCookie("Name", "Bob","/morra",expires.toUTCString());
 
//輸出
console.log(document.cookie);
//結果如下：過期日期沒有顯示,並且含有路徑的cookie也不會顯示
//UserName=Morra; Age=25; FirstVisit=28%20Dec%202016
 
 
//刪除cookie，把時間設為過去的時間即可
//setCookie("UserName", "", "", "Mon, 1 Jan 2000 00:00:00");

1.3 cookie的侷限性

cookie的侷限性如下：

  • 讀取cookie需要額外編寫兩個輔助函式 setCookie()與 getCookie()，相當繁瑣。
  • 瀏覽器每請求一個新的頁面的時候，cookie都會被髮送過去，這樣無形中浪費了頻寬。同時也增加了資料風險，一旦cookie被人攔截了，所有的session資訊都會被別人獲取。
  • 存在過期時間，不能永久存在本地。
  • 當使用者禁用cookie的時候，需要額外程式碼處理這種情況。
  • 瀏覽器支援的cookie總數有限，一般為50個，為了突破這種限制，可以在一個cookie中儲存多條資訊，但這種方法治標不治本。
  • cookie在伺服器和瀏覽器之間共享同一塊儲存空間，使原本就很少的儲存空間更加不夠用。
  • cookie的作用是與伺服器進行互動，作為http規範的一部分而存在。而web儲存只是為了在本地儲存資料而生的。

2 web儲存

web儲存就是為了解決了以上cookie的若干問題而出現的。其優點是：

  • 資料放在瀏覽器上，不會傳給伺服器，專供js開發人員使用。
  • 儲存空間比較大，在Chrome和Firefox中，每個域都有5M空間。
  • 本地儲存中的資料永久存在，除非手動刪除。

web儲存包含兩個元件：會話儲存和本地儲存

會話儲存是臨時的，關閉瀏覽器後資料會自動清除，使用 sessionStorage物件訪問。

本地儲存永遠存在，使用localStorage物件訪問

2.1 定義資料

web儲存的中的資料格式本質上是“鍵值對”，類似py中的字典。

//方法一：
localStorage.setItem("userName","Morra");
 
 
//方法二：
localStorage.userName = Morra;

2.2 獲取資料

//方法一：
var name = localStorage.getItem("userName");
 
 
//方法二：
var name = localStorage.userName;

2.3 刪除資料

//方法一：
localStorage.removeItem("userName");
 
//方法二：
localStorage.userName = null;

刪除本地儲存中的所有鍵值對

localStorage.clear();

2.4 把資料儲存為字串

web儲存都是針對字串的資料儲存，鍵與值都只能是字串。如果要儲存數值或複雜物件，會被自動轉換為字串。所以在儲存除字串以外的資料之前，就需要進行序列化：

var personOne = {
    name:"Morra",
    age:30,
    gender:"M"
}
 
localStorage.person = JSON.stringify(personOne);   //定義資料
 
var savedPerson = JSON.parse(localStorage.person);  //獲取資料

2.5 在Chrome中檢視web儲存的資料

F12開啟開發工具，單擊Application選項卡，左側的Storage：

資料儲存

相關文章