vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲存數(shù)據(jù)
更新時間：2022年08月03日 10:57:04 作者：樹洞菇?jīng)?
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲存數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、cookie的使用
1. 首先加載模塊
npm i js-cookie -S
2. 在使用cookie的頁面上進(jìn)行引入
import Cookies from 'js-cookie'
3. 使用方法
創(chuàng)建一個在整個網(wǎng)站上有效的Cookie
Cookies.set('name', 'value');創(chuàng)建一個從現(xiàn)在起7天后過期的cookie，在整個站點上有效：
Cookies.set('name', 'value', { expires: 7 });創(chuàng)建一個過期的cookie，對當(dāng)前頁面的路徑有效：
Cookies.set('name', 'value', { expires: 7, path: '' });讀取cookie：
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined閱讀所有可見的Cookie：
Cookies.get(); // => { name: 'value' }刪除cookie：
Cookies.remove('name');刪除對當(dāng)前頁面路徑有效的cookie：
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!注：
刪除cookie時，您必須傳遞用于設(shè)置cookie的完全相同的路徑和域?qū)傩?，除非您依賴于默認(rèn)屬性。
刪除未存在的cookie不會引發(fā)任何異常，也不會返回任何值
二、localStorage的使用
注：vue下使用localStorage和H5使用localStorage的方法是一致的，不需要引入插件
1. 儲存
//數(shù)據(jù)
localStorage.setItem('userName','HelloWeen');2. 獲取
localStorage.getItem('userName')3. 刪除
localStorage.removeItem('userName');4. localStorage可以儲存JSON對象
且沒有時間限制的數(shù)據(jù)存儲 ，除非主動刪除。
// 數(shù)組
var arr=[1,2,3];
localStorage.setItem("temp",arr); // 會返回1,2,3
console.log(typeof localStorage.getItem("temp"));// string
console.log(localStorage.getItem("temp"));// 1,2,35. localStorage.setItem()
不會自動將Json對象轉(zhuǎn)成字符串形式
var user= {"userName": "hello","age": 2};
typeof localStorage.getItem("user");// 也會返回String
localStorage.setItem("user", user);// 但是返回[object Object],6. 用localStorage.setItem()
正確存儲JSON對象方法是：
存儲前先用JSON.stringify()方法將json對象轉(zhuǎn)換成字符串形式
JSON.stringify() 方法可以將任意的 JavaScript 值序列化成 JSON 字符串
獲取的時候要將之前存儲的JSON字符串使用JSON.parse()先轉(zhuǎn)成JSON對象再進(jìn)行操作
var user= {"userName": "hello","age": 2};
user= JSON.stringify(user); // 轉(zhuǎn)化為JSON字符串 ?"{"userName":"hello","age":2}"
localStorage.setItem("user", user);// 返回{"userName":"hello","age":2}
user=JSON.parse(localStorage.getItem("user"));三、sessionStorage的使用
定義和使用
- localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù)。
- sessionStorage 用于臨時保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。
注：如果你想在瀏覽器窗口關(guān)閉后還保留數(shù)據(jù)，可以使用 localStorage 屬性， 改數(shù)據(jù)對象沒有過期時間，今天、下周、明年都能用，除非你手動去刪除。
1. 方法
sessionStorage.key(int index) // 返回當(dāng)前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。 sessionStorage.getItem(string key) // 返回鍵名(key)對應(yīng)的值(value)。若沒有返回null。 sessionStorage.setItem(string key, string value) // 該方法接受一個鍵名(key)和值(value)作為參數(shù)，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應(yīng)的值。 sessionStorage.removeItem(string key) // 將指定的鍵名(key)從 sessionStorage 對象中移除。 sessionStorage.clear() // 清除 sessionStorage 對象所有的項。
2. 存儲數(shù)據(jù)
2.1 采用setItem()方法存儲
sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值2.2 通過屬性方式存儲
sessionStorage['testKey'] = '這是一個測試的value值';
2.3 存儲Json對象
sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉(zhuǎn)換為文本格式；讀取時，通過JSON.parse()將文本轉(zhuǎn)換回對象。
var userEntity = {
? ? name: 'tom',
? ? age: 22
};
?
// 存儲值：將對象轉(zhuǎn)換為Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
?
// 取值時：把獲取到的Json字符串轉(zhuǎn)換回對象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom3. 讀取數(shù)據(jù)
3.1 通過getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey對應(yīng)的值3.2 通過屬性方式取值
sessionStorage['testKey']; // => 這是一個測試的value值
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
- 教你在Vue3中使用useStorage輕松實現(xiàn)localStorage功能
- VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解
- vue使用localStorage保存登錄信息 適用于移動端、PC端
- Vue使用localStorage存儲數(shù)據(jù)的方法
- Vue項目使用localStorage+Vuex保存用戶登錄信息
- 詳解vue中l(wèi)ocalStorage的使用方法
- 詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
- vue中的localStorage使用方法詳解
相關(guān)文章
Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn)
這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
今天小編就為大家分享一篇關(guān)于vue-router重定向和路由別名的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue.js實現(xiàn)標(biāo)簽頁切換效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue中組件(Component)和插件(Plugin)的區(qū)別及說明
這篇文章主要介紹了Vue中組件(Component)和插件(Plugin)的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動生成 symbol 標(biāo)簽并插入 html，這篇文章主要介紹了VUE-cli3使用 svg-sprite-loader,需要的朋友可以參考下2018-10-10
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關(guān)于vue如何實現(xiàn)pc和移動端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
現(xiàn)在的手機(jī)五花八門,造就了移動端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問題,下面這篇文章主要給大家介紹了vue實現(xiàn)移動端適方案的相關(guān)資料,需要的朋友可以參考下2022-10-10