localStorage、cookie的使用總結

 

 一、localStorage是H5的新特性，主要用來本地存儲，通常瀏覽器支持的大小是5M,不一樣瀏覽器會有所不一樣，解決了cookie存儲空間不足的問題。

二、使用：
     ⑴、存

if(!window.localStorage){

    alert("瀏覽器不支持localstorage");

    return false;

}else{

    var storage = window.localStorage;

    // 方法1

    storage["a"] = 1;

    // 方法2

    storage.b = 1;

    // 方法3  推薦

    storage.setItem("c", 3);

    console.log(typeof storage["c"]); // string  int類型打印出來是string,localstorage只支持string類型的存儲

}

⑵、取  

if(!window.localStorage){

    alert("瀏覽器不支持localstorage")

}else{

    var storage=window.localStorage;

    // 方法1

    var a=storage.a;

    // 方法2

    var b=storage["b"]

    // 方法3 推薦

    var c = storage.getItem("c");

}

⑶、修改

if(!window.localStorage){

            alert("瀏覽器支持localstorage");

        }else{

            var storage=window.localStorage;

            storage.b=1;

            storage.b=4; // 直接修改

            console.log(storage.b);

 

        }

⑷、刪除

// 移除全部

localStorage.clear();

 

// 刪除某個鍵值對

localStorage.removeItem("a");

⑸、key()方法

for（i=0;i<storage.length;i++）{

    var key =storage.key(i);

    console.log(key) // 獲取對應的鍵

    

}
⑹、存入爲JSON形式時，先轉爲json字符串

function setStorage () {

var str_username = $("#loginname").val();  

var str_password = $("#password").val();

var storage=window.localStorage;

var data = {

username: str_username,

password: str_password

}

var d = JSON.stringify(data)

storage.setItem("data",d);

} 

⑺、讀取後用轉爲JSON對象 
 

 //將JSON字符串轉換成爲JSON對象輸出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj); // Object


三、侷限：
     ①、IE8以上才支持
     ②、瀏覽器會把localstorage的值類型限定爲string類型，JSON對象須要轉換。
     ③、本質上是存取字符串，存儲內容太多消耗空間，頁面變卡。
     ④、localStorage在瀏覽器的隱私模式下不可讀取
     ⑤、不能被爬蟲抓取

Cookie
讓網站服務器把少許數據儲存到客戶端的硬盤或內存，從客戶端的硬盤讀取數據的一種技術。
使用jquery.cookie.js
一、引入jquery.cookie.js
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.cookie.js"></script>

二、設置 "會話"cookie 

$.cookie('username', 'xy');

 cookie有效期默認到用戶關閉瀏覽器 

三、設置有效時間
$.cookie('username', 'xy', { expires: 7 });

四、設置有效路徑 
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 若是在整個網站中訪問這個cookie須要這樣設置有效路徑：path: '/'

五、讀取cookie
 $.cookie('username') 

 注：cookie是基於域名來儲存的。意思您要放到測試服務器上或者本地localhost服務器上纔會生效。cookie具備不一樣域名下儲存不可共享的特性。單純的本地一個html頁面打開是無效的。

六、刪除cookie 

 $.cookie('username', null);   //經過傳遞null做爲cookie的值便可

七、可選參數

$.cookie('the_cookie','the_value',{

    expires:7,  //（Number|Date）有效期；設置一個整數時，單位是天；也能夠設置一個日期對象做爲Cookie的過時日期；

    path:'/',   // （String）建立該Cookie的頁面路徑；

    domain:'jquery.com', // （String）建立該Cookie的頁面域名；

    secure:true // （Booblean）若是設爲true，那麼此Cookie的傳輸會要求一個安全協議，例如：HTTPS；

  })　   更多資料，進羣領取  web前端互動交流羣，434623999