国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

：localStorage和sessionStorage使用方法及應用場景說明

這兩個是HTML5新增加的，經常用到，在這里記錄一下。

兩個的共同點都是存儲在客戶端也就是瀏覽器，存儲的數據大小是5M，比cookie的4K大了很多。

1、生命周期：

　　localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。

　　　　作用域：相同瀏覽器的不同標簽在同源情況下可以共享localStorage

　　sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。

　　　　作用域：只在當前標簽可用，當前標簽的iframe中且同源可以共享

2、存儲大小：

　　localStorage和sessionStorage的存儲數據大小一般都是：5MB

3、存儲位置：

　　localStorage和sessionStorage都保存在客戶端，以鍵值對的形式存儲，不與服務器進行交互通信。

4、存儲內容類型：

　　localStorage和sessionStorage只能存儲字符串類型，對于復雜的對象可以使用ECMAscript提供的JSON對象的stringify和parse來處理

5、獲取方式：

　　localStorage：window.localStorage;；

　　sessionStorage：window.sessionStorage;。

6、應用場景：

　　localStoragese：常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。

　　sessionStorage：敏感賬號一次性登錄。

下面說一下具體用法：

兩個的用法可以說一樣，具體就是保存到本地、從本地取出來、刪除存儲的數據、清除全部，具體看下面代碼：

 1 //localStorage的用法 
 2 //保存到本地,第一個參數是變量名，第二個是值 
 3 localStorage.setItem('name','張三'); 
 4 //從本地取出，只有一個參數，存儲的變量名 
 5 localStorage.getItem('name'); 
 6 //刪除某一個存儲的數據 
 7 localStorage.removeItem('name'); 
 8 //清除所有的數據 
 9 localStorage.clear();
10 //sessionStorage的用法，參考localStorage的用法
11 sessionStorage.setItem('name','李四');
12 sessionStorage.getItem('name');
13 sessionStorage.removeItem('name');
14 sessionStorage.clear();

第一次使用這個的可能會問怎么知道數據有沒有存儲到客戶端，很簡單，就像我們查看元素一樣，localStorage和sessionStorage也可以在瀏覽器控制臺查看，首先運行以下代碼：

1 //保存到本地
2 localStorage.setItem('name','張三');
3 
4 sessionStorage.setItem('name','李四');

然后就可以看到下圖：

可以看到我們想要保存的數據已經存儲到了本地。 

上面只是簡單的存儲，在實際項目中可能會出現需要存儲數組或者是對象，這樣的情況下就不能像上面那樣簡單的存儲，需要轉換一下格式。

因為localStorage和sessionStorage是以字符串格式存儲到本地的。

對于需要存儲數組或者是對象，我們可以轉換一下格式，如下代碼：

1 //保存
2 setSession(key,value){
3     localStorage.setItem(key,JSON.stringify(value))
4 };
5 //取出
6 getSession(key){
7     return JSON.parse(localStorage.getItem(key))
8 };

上面是localStorage用法，sessionStorage同理。

刪除和清除全部還是上面代碼。

特別要注意：

setStorage是存儲數據的，key是指定的數據名稱，可以隨意起，但是一定要是字符串類型，否則瀏覽器自動把值作為key的名字。

如上圖第一個值，就是key不是以字符串指定的，即沒有加雙引號。value值字符串類型的也切記加雙引號。