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,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 字符串
獲取的時(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); // => tom3. 讀取數(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)文章
這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ，主要使用v-model這個(gè)數(shù)據(jù)雙向綁定，有興趣的可以了解一下2017-09-09
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
在 Vue 3 中,訪問子組件的 DOM 元素是一個(gè)常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下2023-08-08
vue2.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-05
vue3項(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-02
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08