欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲存數(shù)據(jù)

 更新時(shí)間:2022年08月03日 10:57:04   作者:樹洞菇?jīng)? 
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲存數(shù)據(jù),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js項(xiàng)目中實(shí)用的小技巧匯總

    vue.js項(xiàng)目中實(shí)用的小技巧匯總

    這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • Vue中定義全局變量與常量的各種方式詳解

    Vue中定義全局變量與常量的各種方式詳解

    Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題,發(fā)現(xiàn)很多朋友對這塊不熟悉,所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • 淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理

    淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理

    本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ,主要使用v-model這個(gè)數(shù)據(jù)雙向綁定,有興趣的可以了解一下
    2017-09-09
  • Vue表單類的父子組件數(shù)據(jù)傳遞示例

    Vue表單類的父子組件數(shù)據(jù)傳遞示例

    本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue3獲取子組件的DOM元素的方法總結(jié)

    vue3獲取子組件的DOM元素的方法總結(jié)

    在 Vue 3 中,訪問子組件的 DOM 元素是一個(gè)常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下
    2023-08-08
  • vue2.x中的provide和inject用法小結(jié)

    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í)例代碼詳解

    這篇文章主要介紹了使用Vue.observable()進(jìn)行狀態(tài)管理的實(shí)例代碼,本文通過代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • vue3項(xiàng)目目錄結(jié)構(gòu)示例詳解

    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文件的方法詳解

    Vue?展示.md文件的方法詳解

    這篇文章主要介紹了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)容(解決方法)

    這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文
    2018-08-08

最新評論