vue中sessionStorage的使用

轉載:https://www.cnblogs.com/denken/p/11197612.html

 

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
sessionStorage 用於臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
提示: 如果你想在瀏覽器窗口關閉后還保留數據，可以使用 localStorage 屬性， 改數據對象沒有過期時間，今天、下周、明年都能用，除非你手動去刪除。

1.方法

sessionStorage.key(int index) //返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。

sessionStorage.getItem(string key) //返回鍵名(key)對應的值(value)。若沒有返回null。

sessionStorage.setItem(string key, string value) //該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。

sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。

sessionStorage.clear() //清除 sessionStorage 對象所有的項。

 

2，存儲數據

2.1 采用setItem()方法存儲

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

 

2.2 通過屬性方式存儲

sessionStorage['testKey'] = '這是一個測試的value值';

 

2.3 存儲Json對象

sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換為文本格式；讀取時，通過JSON.parse()將文本轉換回對象。
var userEntity = {
name: 'tom',
age: 22
};

// 存儲值：將對象轉換為Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值時：把獲取到的Json字符串轉換回對象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

 

3,讀取數據

3.1 通過getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey對應的值

 

3.2 通過屬性方式取值

sessionStorage['testKey']; // => 這是一個測試的value值