SoFunction
Updated on 2025-03-08

Vue's browser storage method encapsulation example

Vue's browser storage method encapsulation example

Updated: March 15, 2018 11:43:41 Author: echo008
Below, the editor will share with you a vue browser storage method encapsulation example, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor

As shown below:

export function isObject (val) {
 return val !== null && typeof val === 'object'
}
export function setStore (key, val, type = 'localStorage') {
 if (isObject(val)) window[type].setItem(key, (val))
 else window[type].setItem(key, val)
}
export function getStore (key, type = 'localStorage') {
 var val = window[type].getItem(key)
 try {
 return (val)
 } catch (e) {
 return val
 }
}
export function setSessionStore (key, val) {
 setStore(key, val, 'sessionStorage')
}
export function getSessionStore (key) {
 return getStore(key)
}
// Default 30 minutesexport function setExpireStore (key, val, ex = 1.8e6) {
 setStore(key, {v: val, t: () + ex})
}
export function getExpireStore (key) {
 var obj = getStore(key)
 if ( > ()) return 
 else return false
}
export default {
 isObject,
 setStore,
 getStore,
 setSessionStore,
 getSessionStore,
 setExpireStore,
 getExpireStore
}

The above example of Vue's browser storage method encapsulation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.

  • vue
  • Package
  • Browser
  • storage

Related Articles

  • vue-cli scaffolding initialization project uses of each folder

    This article mainly introduces the uses of each folder of the vue-cli scaffolding initialization project. This article introduces you very detailedly and has certain reference value for your study or work. Friends who need it can refer to it.
    2023-01-01

  • Multi-page printing is implemented in vue

    This article mainly introduces the use of multi-page printing in vue. The article introduces the example code in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2020-03-03

  • A brief analysis of the usage and differences between $emit and $on

    In   , the $emit and $on methods are two commonly used methods, used to implement communication between components. Although their names are very similar, their functions and usages are different. This article will introduce the difference between the $emit and $on methods, and use code examples to illustrate their usage. Interested friends can refer to the following
    2023-07-07

  • Caching practice

    This article mainly introduces caching practice. Nuxt's cache can be divided into component-level cache, API-level cache and page-level cache. This article introduces these three caches in detail. Interested friends can refer to it.
    2018-06-06

  • Solution to some map files appear after Vue package

    This article mainly introduces the solution to the appearance of some map files after Vue packaging. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's take a look with the editor
    2018-02-02

  • Example of using filter-method attribute code under Select in Element-Plus in vue3.0

    This article mainly introduces you to the relevant information about using the filter-method attribute under Select in Element-Plus in vue 3.0. The usage of Filter-method refers to selecting items that meet the conditions from a set of data. The article introduces it in detail through pictures and texts and codes. Friends who need it can refer to it.
    2023-12-12

  • vue-cli3 DllPlugin Method for Extracting Public Library

    This article mainly introduces the vue-cli3 DllPlugin extraction public library. Friends who need it can refer to it
    2019-04-04

  • Concepts and usage steps in vue project

    This article mainly introduces what is in the vue project. This article only briefly introduces some basic configurations of jsconfig.json, and jsconfig.json provides a large number of methods that can enable us to quickly and conveniently improve code efficiency. Friends who need it can refer to it
    2022-07-07

  • vue elementUI uses tabs to link it with the navigation bar

    This article mainly introduces in detail the linkage of vue elementUI using tabs and navigation bar, which has certain reference value. Interested friends can refer to it.
    2019-06-06

  • How to resolve conflict between vue and traditional jquery plug-in

    This article mainly introduces how to resolve the conflict between vue and traditional jquery plug-ins. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2017-03-03

Latest Comments