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

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ù)組鍵名的方法

    Vue 獲取數(shù)組鍵名的方法

    本篇文章主要介紹了Vue 獲取數(shù)組鍵名的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法

    Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法

    這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue.nextTick純干貨使用方法詳解

    Vue.nextTick純干貨使用方法詳解

    這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 如何在vue3中優(yōu)雅的使用jsx/tsx詳解

    如何在vue3中優(yōu)雅的使用jsx/tsx詳解

    看了一些 Vue3 的組件庫(kù)源碼,發(fā)現(xiàn)無一例外都使用的jsx/tsx來實(shí)現(xiàn),而且實(shí)現(xiàn)方式也各不相同,下面這篇文章主要給大家介紹了關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解

    如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解

    最近有項(xiàng)目需要用到對(duì)圖片進(jìn)行局部放大,類似淘寶商品頁(yè)的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 如何重置vue打印變量的顯示方式

    如何重置vue打印變量的顯示方式

    這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧。
    2017-12-12
  • vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果

    vue實(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
  • vue日歷/日程提醒/html5本地緩存功能

    vue日歷/日程提醒/html5本地緩存功能

    這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • Vue的Class與Style綁定的方法

    Vue的Class與Style綁定的方法

    本篇文章主要介紹了Vue的Class與Style綁定的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 學(xué)習(xí)vue.js計(jì)算屬性

    學(xué)習(xí)vue.js計(jì)算屬性

    這篇文章主要和大家一起學(xué)習(xí)vue.js的計(jì)算屬性,分享一些計(jì)算屬性練習(xí)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評(píng)論