JS的本地保存localStorage、sessionStorage用法總結

轉：https://blog.csdn.net/kerryqpw/article/details/71439104

JS的本地保存localStorage、sessionStorage用法總結

 

         localStorage、sessionStorage是Html5的特性,IE7以下瀏覽器不支持

        為什么要掌握localStorage、和sessionStorage。

       JS中為了減少與服務器的通信，經常會用到保存的數據到本地的功能，

       例如本地用戶信息保存。

 

      localStorage和sessionStorage的區別：

 

     (1)、localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象。

     (2)、他們均只能存儲字符串類型的對象（雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。

     (3)、localStorage生命周期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。

             sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了

     (4)、不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那么他們之間是可以共享sessionStorage的。

     (5)、

 

         http://www.test.com

         https://www.test.com （不同源，因為協議不同）

         http://my.test.com（不同源，因為主機名不同）

         http://www.test.com:8080（不同源，因為端口不同）

 

 

 

     localStorage、和sessionStorage的用法:

    

localStorage和sessionStorage使用時使用相同的API：

localStorage.setItem("key","value");//以“key”為名稱存儲一個值“value”

localStorage.getItem("key");//獲取名稱為“key”的值

枚舉localStorage的方法：

for(var i=0;i<localStorage.length;i++){

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}

刪除localStorage中存儲信息的方法：

localStorage.removeItem("key");//刪除名稱為“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

 

  

     代碼實現:

 
            
            sessionStorage.setItem("user_name","test333");

alert(sessionStorage.getItem("user_name"));   //打印test333  

sessionStorage.setItem("user_name","test22");  

alert(sessionStorage.getItem("user_name"));   //打印test22