vue中使用localStorage儲存資訊

2022-05-17 04:16:19 字數 1863 閱讀 5001

對瀏覽器來說,使用 web storage 儲存鍵值對比儲存 cookie 方式更直觀,而且容量更大,它包含兩種:localstorage 和 sessionstorage

localstorage(長期儲存) :與 sessionstorage 一樣,但是瀏覽器關閉後,資料依然會一直存在

所以上次使用cookie的時候就遇到了乙個坑,設定後馬上訪問session會獲取不到,蛋疼,還需要重新整理一下,原因是:

當我們首次訪問設定cookie的頁面時,伺服器會把設定的cookie值通過響應頭髮送過來,告訴瀏覽器將cookie儲存的本地相應資料夾中(注意:第一次訪問時本地還沒有儲存cookie,所以此時獲取不到值);

注意:sessionstorage 和 localstorage 的用法基本一致,引用型別的值要轉換成json,所以這裡就只列舉localstorage

//

物件const info = ; //

字串const str="

haha";

localstorage.setitem(

'hou

', json.stringify(info

));

localstorage.setitem(

'zheng

', str);

var data1 = json.parse(localstorage.getitem('

hou'

));

var data2 = localstorage.getitem('

zheng

');

//

刪除某個

localstorage.removeitem('

hou'

);//

刪除所有

localstorage.clear();

storage 發生變化(增加、更新、刪除)時的 觸發,同乙個頁面發生的改變不會觸發,只會監聽同一網域名稱下其他頁面改變 storage

根據我的需求來的乙個預設記住上次選擇的,很簡單

新增資料的時候,下次新增預設記住我上次的選擇

所以,在新增或者提交的時候儲存值即可,

localstorage.setitem('

projectid

',me.workhourdata.projectid+"

,"+me.workhourdata.projectmanager);

在開啟新建頁面的時候獲取一下就好了,只需要判斷非空就行

//

記住上次選中的審核人

if(localstorage.length>0

) }

}

localstorage有效期是永久的。一般的瀏覽器能儲存的是5mb左右。sessionstorage api與localstorage相同。

sessionstorage預設的有效期是瀏覽器的會話時間(也就是說標籤頁關閉後就消失了)。

localstorage作用域是協議、主機名、埠。(理論上,不人為的刪除,一直存在裝置中)

sessionstorage作用域是視窗、協議、主機名、埠。

知道了這些知識點後,你的問題就很好解決了。

localstorage是window上的。所以不需要寫this.localstorage,vue中如果寫this,是指vue例項。會報錯

Vue之在vue中使用render

使用components進行渲染得到 建立 vue 例項,得到 viewmodel var vm newvue methods components script body html 使用render 這裡 return 的結果,會 替換頁面中 el 指定的那個 容器 建立 vue 例項,得到 vi...

Vue 如何在Vue中使用樣式

使用class樣式 1.陣列 第一種使用方式,直接傳遞乙個陣列,注意 這裡的class需要使用 v bind做資料繫結 2.陣列中使用三元表示式 3.陣列中巢狀物件 4.直接使用物件 不用陣列包裹 既然是乙個物件,那我們也可以直接在data身上寫進行儲存 內聯樣式 1.直接在元素上通過v bind ...

vue中使用加密 解密

首先引入cdn src script 在webpack.base.conf.js配置 externals 在src目錄下,建立crypto資料夾,新建index.js檔案,寫入加密 export default return encrypted.tostring 解密 get word,keystr...