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)建一個(gè)在整個(gè)網(wǎng)站上有效的Cookie
Cookies.set('name', 'value');
創(chuàng)建一個(gè)從現(xiàn)在起7天后過期的cookie,在整個(gè)站點(diǎn)上有效:
Cookies.set('name', 'value', { expires: 7 });
創(chuàng)建一個(gè)過期的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í),您必須傳遞用于設(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í)間限制的數(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,3
5. 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 字符串
獲取的時(shí)候要將之前存儲的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 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù),在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。
注:如果你想在瀏覽器窗口關(guān)閉后還保留數(shù)據(jù),可以使用 localStorage 屬性, 改數(shù)據(jù)對象沒有過期時(shí)間,今天、下周、明年都能用,除非你手動去刪除。
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) // 該方法接受一個(gè)鍵名(key)和值(value)作為參數(shù),將鍵值對添加到存儲中;如果鍵名存在,則更新其對應(yīng)的值。 sessionStorage.removeItem(string key) // 將指定的鍵名(key)從 sessionStorage 對象中移除。 sessionStorage.clear() // 清除 sessionStorage 對象所有的項(xiàng)。
2. 存儲數(shù)據(jù)
2.1 采用setItem()方法存儲
sessionStorage.setItem('testKey','這是一個(gè)測試的value值'); // 存入一個(gè)值
2.2 通過屬性方式存儲
sessionStorage['testKey'] = '這是一個(gè)測試的value值';
2.3 存儲Json對象
sessionStorage也可存儲Json對象:存儲時(shí),通過JSON.stringify()將對象轉(zhuǎn)換為文本格式;讀取時(shí),通過JSON.parse()將文本轉(zhuǎn)換回對象。
var userEntity = { ? ? name: 'tom', ? ? age: 22 }; ? // 存儲值:將對象轉(zhuǎn)換為Json字符串 sessionStorage.setItem('user', JSON.stringify(userEntity)); ? // 取值時(shí):把獲取到的Json字符串轉(zhuǎn)換回對象 var userJsonStr = sessionStorage.getItem('user'); userEntity = JSON.parse(userJsonStr); console.log(userEntity.name); // => tom
3. 讀取數(shù)據(jù)
3.1 通過getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey對應(yīng)的值
3.2 通過屬性方式取值
sessionStorage['testKey']; // => 這是一個(gè)測試的value值
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
- 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
- VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
- vue使用localStorage保存登錄信息 適用于移動端、PC端
- Vue使用localStorage存儲數(shù)據(jù)的方法
- Vue項(xiàng)目使用localStorage+Vuex保存用戶登錄信息
- 詳解vue中l(wèi)ocalStorage的使用方法
- 詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
- vue中的localStorage使用方法詳解
相關(guān)文章
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ,主要使用v-model這個(gè)數(shù)據(jù)雙向綁定,有興趣的可以了解一下2017-09-09vue2.x中的provide和inject用法小結(jié)
這篇文章主要介紹了vue2.x中的provide和inject用法小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼詳解
這篇文章主要介紹了使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼,本文通過代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue3項(xiàng)目目錄結(jié)構(gòu)示例詳解
更好的了解項(xiàng)目的目錄結(jié)構(gòu),能更好的去開發(fā)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目目錄結(jié)構(gòu)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08