Vue中的Strorage本地化存儲(chǔ)詳解
更新時(shí)間:2022年04月29日 15:06:50 作者:是阿嵐吶
這篇文章主要介紹了Vue中的Strorage本地化存儲(chǔ)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Storage本地化存儲(chǔ)
存儲(chǔ)優(yōu)點(diǎn):
- 空間更大:cookie為4kb,storage為5mb
- 節(jié)省網(wǎng)絡(luò)流量:不會(huì)發(fā)送數(shù)據(jù)到服務(wù)器,直接存儲(chǔ)在本地
- 快速顯示:存儲(chǔ)在本地的數(shù)據(jù)+瀏覽器本地的緩存,比從服務(wù)器獲取數(shù)據(jù)快得多
localStorage
- 會(huì)永久存儲(chǔ)會(huì)話數(shù)據(jù),除非手動(dòng)刪除或者removeItem
- 在所有的同源的窗口中存儲(chǔ)的數(shù)據(jù)是共享的
- 只能存儲(chǔ)字符串類型的數(shù)據(jù),復(fù)雜的對(duì)象數(shù)據(jù)必須借助JSON的stringfy和parse處理
sessionStorage
- 在一個(gè)會(huì)話期內(nèi),存儲(chǔ)會(huì)話數(shù)據(jù),當(dāng)關(guān)閉當(dāng)前的會(huì)話頁(yè)面(瀏覽器頁(yè)面)時(shí),數(shù)據(jù)就刪除了
- 存儲(chǔ)的數(shù)據(jù)各會(huì)話窗口無法共享
- 只能存儲(chǔ)字符串類型的數(shù)據(jù),復(fù)雜的對(duì)象數(shù)據(jù)必須借助JSON的stringfy和parse處理
Strorage本地存儲(chǔ)實(shí)例
在model文件夾下面新建一個(gè)storage.js
const storage = { set(key,value){ sessionStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(sessionStorage.getItem(key)); }, getForIndex(index){ return sessionStorage.key(index) }, getKeys(){ let items = this.getAll(); let keys = []; for(let index = 0;index<items.length;index++){ keys.push(items[index].key); } }, getLength(){ return sessionStorage.length; }, getSupport(){ return (typeof (Storage) !== "undefined")?true:false; }, remove(key){ sessionStorage.removeItem(key); }, removeAll(){ sessionStorage.clear(); }, getAll(){ let len = sessionStorage.length; let arr = []; for(let i=0;i<len.length;i++){ const getKey = sessionStorage.key(i); const getVal = sessionStorage.getItem(getKey); arr[i] = { "key":getKey, "val":getVal, } } return arr; }, }; export default storage;
創(chuàng)建store
import Vue from "vue"; import Vuex from "vuex"; import storage from "@/model/storage"; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 存儲(chǔ)token token: '', userName: '', roleId:'', staticRoute:[]//這個(gè)是本地路由 }, actions: { setuserInfoFun(context, name){ context.commit('setuserInfo', name); }, set_tokenFun(context, token){ context.commit('set_token', token) }, del_tokenFun(context){ context.commit('del_token') }, set_roleIdFun(context,id){ context.commit('set_roleId',id) }, set_routerFun(context,route){ context.commit('set_router',route) } }, // 計(jì)算屬性 mutations: { // 修改token,并將token存入localStorage set_token(state, token){ state.token = token; storage.set('token', token); }, del_token(state){ state.token = ""; storage.remove('token'); }, setuserInfo(state, userName){ state.userName = userName; }, set_roleId(state,id){ state.roleId = id; }, set_router(state,router){ state.staticRoute = router; storage.set('route', router); } } }); export default store;
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解
最近有項(xiàng)目需要用到對(duì)圖片進(jìn)行局部放大,類似淘寶商品頁(yè)的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果,首先我們需要定義data里面的數(shù)據(jù),使用computed對(duì)data進(jìn)行處理,需要的朋友可以參考下2018-04-04