How to use localstorage and sessionstorage in Vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use localstorage and sessionstorage in Vue

亚连

Jun 19, 2018 am 10:08 AM

localstorage sessionstorage vue

This article mainly introduces the detailed usage and experience of localstorage and sessionstorage in Vue. Friends in need can follow the editor for reference and study.

1. Several problems exposed in the use of the project

Everyone directly uses localstorage['aaa']='This is a sample string' these native Syntax implementation, this coupling degree is too high. If one day we need to change the implementation method, or do some control on the storage size, then there will be a lot of code that needs to be modified.

The project is very big, so everyone has to start the key The name will inevitably be repeated, and this will also cause global pollution

Because the use of localstorage is not standardized, it results in waste and insufficient storage space

2. Solution

Encapsulate the usage of storage and handle it uniformly

Standardize the naming rules of the key value of storage
Standardize the usage of storage

2.1. Encapsulate the unified method

Encapsulating the method can reduce coupling, facilitate switching of implementation methods, and control the storage size

Changing the implementation can be achieved by configuring different parameters

Edit as shown The project structure shown

Code implementation

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

/*
 * storage.js
 */
/*
 * @Author: 石国庆
 * @Desc: 本地数据存储方法封装
 * @Date: 2017.11.14
 * @Ref:
 *  https://github.com/WQTeam/web-storage-cache
 *  https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 * @Explain:为了不new对象，只能多写几遍
 * @Example:
 *
 * 1、LocalStorage的使用
 * import storage from &#39;@/utils/storage.js&#39;
 * storage.setItem(&#39;shiguoqing0&#39;,[1,2,3,4,5,6])
 * storage.setItem(&#39;shiguoqing1&#39;,{userId:&#39;dfdf&#39;,token:11232323})
 * storage.setItem(&#39;shiguoqing2&#39;,&#39;dfdfdf&#39;)
 * console.log(storage.getItem(&#39;shiguoqing0&#39;))
 * console.log(storage.getItem(&#39;shiguoqing1&#39;))
 * console.log(storage.getItem(&#39;shiguoqing2&#39;))
 * storage.removeItem(&#39;shiguoqing2&#39;)
 *
 *
 * 2、SessionStorage的使用
 * storage.setItem(&#39;shiguoqing0&#39;,[1,2,3,4,5,6],{type:&#39;session&#39;})
 *
 * */
// TODO:其他方法的实现
// TODO:超时时间的设置
/*
 * 方法实现
 * */
import local from &#39;./storage/localstorage.js&#39;
import session from &#39;./storage/session.js&#39;
import cookies from &#39;./storage/cookies.js&#39;
import json from &#39;./storage/json.js&#39;
/*
* 函数体
* */
let storage= {
 config:{
  type:&#39;local&#39;,// local,session,cookies,json
  expires:new Date().getTime() + 100 * 24 * 60 * 60 * 1000
 },
 getStorage(options){
  let config={}
  if(options){
   config=Object.assign({},this.config,options)
  }else{
   config=this.config
  }
  return this.createStorage(config.type)
 },
 createStorage(name){
  switch(name){
   case &#39;local&#39;:return local;break
   case &#39;session&#39;:return session;break
   case &#39;cookies&#39;:return cookies;break
   case &#39;json&#39;:return json;break
  }
 },
 getItem(key,options){
  let store=this.getStorage(options)
  return store.getItem(key)
 },
 setItem(key, value,options){
  let store=this.getStorage(options)
  store.setItem(key,value)
 },
 removeItem(key,options){
  let store=this.getStorage(options)
  store.removeItem(key)
 },
 getAll(){},
 clear(options){
  let store=this.getStorage(options)
  store.clear()
 },
 key(n){},
 lenght(){},
 has(key){},
 forEach(cb){},
 deleteAllExpires(){},
 // 获取最大存储空间：只有LocalStorage和SessionStorage可以使用这个方法
 getMaxSpace(options){
  let store=this.getStorage(options)
  store.getMaxSpace()
 },
 // 获取使用了的空间：只有LocalStorage和SessionStorage可以使用这个方法
 getUsedSpace(options){
  let store=this.getStorage(options)
  store.getUsedSpace()
 }
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、遍历localStorage存储的key
//  .length 数据总量，例：localStorage.length
//  .key(index) 获取key，例：var key=localStorage.key(index);
// 备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
// 超时设置
// function(st, key, value, expires) {
//  if (st == &#39;l&#39;) {
//   st = window.localStorage;
//   expires = expires || 60;
//  } else {
//   st = window.sessionStorage;
//   expires = expires || 5;
//  }
//  if (typeof value != &#39;undefined&#39;) {
//   try {
//    return st.setItem(key, JSON.stringify({
//     data: value,
//     expires: new Date().getTime() + expires * 1000 * 60
//    }));
//   } catch (e) {}
//  } else {
//   var result = JSON.parse(st.getItem(key) || &#39;{}&#39;);
//   if (result && new Date().getTime() < result.expires) {
//    return result.data;
//   } else {
//    st.removeItem(key);
//    return null;
//   }
//  }
// }

Copy after login

/*
 * localstorage.js
 * localstorage的实现
 */
// 这个有点奇怪,文件名称叫local.js不能按照js文件解析
export default {
 getItem(key){
  let item = localStorage.getItem(key)
  // 这点要判断是字符串还是对象
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // 这点要判断是字符串还是对象
  if (typeof value == "string") {
   localStorage.setItem(key, value)
  } else {
   let item = JSON.stringify(value)
   localStorage.setItem(key, item)
  }
 },
 removeItem(key){
  localStorage.removeItem(key)
 },
 getAll(){},
 clear(){
  localStorage.clear()
 },
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){},
 // 获取localstorage最大存储容量
 getMaxSpace(){
  if (!window.localStorage) {
   console.log(&#39;当前浏览器不支持localStorage!&#39;)
  }
  var test = &#39;0123456789&#39;
  var add = function (num) {
   num += num
   if (num.length == 10240) {
    test = num
    return
   }
   add(num)
  }
  add(test)
  var sum = test
  var show = setInterval(function () {
   sum += test
   try {
    window.localStorage.removeItem(&#39;test&#39;)
    window.localStorage.setItem(&#39;test&#39;, sum)
    console.log(sum.length / 1024 + &#39;KB&#39;)
   } catch (e) {
    console.log(sum.length / 1024 + &#39;KB超出最大限制&#39;)
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.localStorage) {
   console.log(&#39;浏览器不支持localStorage&#39;)
  }
  var size = 0
  for (item in window.localStorage) {
   if (window.localStorage.hasOwnProperty(item)) {
    size += window.localStorage.getItem(item).length
   }
  }
  console.log(&#39;当前localStorage使用容量为&#39; + (size / 1024).toFixed(2) + &#39;KB&#39;)
 }
}

Copy after login

/*
 * session.js
 * sessionstorage的实现
 */
export default {
 getItem(key){
  let item = sessionStorage.getItem(key)
  // 这点要判断是字符串还是对象
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // 这点要判断是字符串还是对象
  if (typeof value == "string") {
   sessionStorage.setItem(key, value)
  } else {
   let item = JSON.stringify(value)
   sessionStorage.setItem(key, item)
  }
 },
 removeItem(key){
  sessionStorage.removeItem(key)
 },
 getAll(){},
 clear(){
  sessionStorage.clear()
 },
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){},
 // 获取localstorage最大存储容量
 getMaxSpace(){
  if (!window.sessionStorage) {
   console.log(&#39;当前浏览器不支持sessionStorage!&#39;)
  }
  var test = &#39;0123456789&#39;
  var add = function (num) {
   num += num
   if (num.length == 10240) {
    test = num
    return
   }
   add(num)
  }
  add(test)
  var sum = test
  var show = setInterval(function () {
   sum += test
   try {
    window.sessionStorage.removeItem(&#39;test&#39;)
    window.sessionStorage.setItem(&#39;test&#39;, sum)
    console.log(sum.length / 1024 + &#39;KB&#39;)
   } catch (e) {
    console.log(sum.length / 1024 + &#39;KB超出最大限制&#39;)
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.sessionStorage) {
   console.log(&#39;浏览器不支持sessionStorage&#39;)
  }
  var size = 0
  for (item in window.sessionStorage) {
   if (window.sessionStorage.hasOwnProperty(item)) {
    size += window.sessionStorage.getItem(item).length
   }
  }
  console.log(&#39;当前sessionStorage使用容量为&#39; + (size / 1024).toFixed(2) + &#39;KB&#39;)
 }
}

Copy after login

/*
 * cookies.js
 * cooikes的实现，这辈子估计没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

Copy after login

/*
 * json.js
 * json的实现，这辈子估计也没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

Copy after login

2.2. Standardize the use of namespace

In order to prevent key value pollution, we can use the namespace reasonably

We can define a namespace, but we cannot store a lot of data in the same object, so the amount of subsequent operations will be too large

For example, the global one is under global

For example, the addition of each functional system System affixes

The namespace specification of a system should be designed in advance, otherwise many people will use it without following the rules during actual development

Things used globally must be reflected in the README.md document Come out

Example

* localStorage[&#39;SGQ.global.userAuthor&#39;]：登录的用户信息都在这里,菜单,组织，集团
* localStorage[&#39;SGQ.global.systemName&#39;]：登录的系统名称
* localStorage[&#39;SGQ.vuex.state&#39;]:vuex中的state的存储地址，这里面有所有的的东西
* localStorage[&#39;SGQ.wms.warehouse&#39;]:wms需要的仓库信息
+ localStorage[&#39;SGQ.wms.warehouse&#39;].permissionId
+ localStorage[&#39;SGQ.wms.warehouse&#39;].dataResource
* localStorage[&#39;SGQ.tms.org&#39;]:tms需要的网点的信息
+ localStorage[&#39;SGQ.tms.org&#39;].permissionId
+ localStorage[&#39;SGQ.tms.org&#39;].orgName

Copy after login

2.3. Storage usage specifications

2.3.1. Cause of the problem

This problem occurs because we need to do permissions After logging in, I kept getting reports of insufficient storage space. After checking the reason, I found that the backend returned all the thousands of super-managed data, which was not enough. Later, I modified the data returned by the backend interface. Content solves this problem.

But what has this incident brought us to think about?

The storage capacity of localstorage and sessionstorage is basically 5M in different browsers

The storage of localstorage and sessionstorage follows the domain name

localstorage under boss.hivescm.com The storage is 5M

The localstorage storage under b2b.hivescm.com is also 5M

Even if the problem is solved this time, we should make a plan to make full use of localstorage and sessionstorage under one domain name. Total 10M space

2.3.2. Storage usage plan

Things used globally, shared, and permanently stored are stored in localstorage

No need for permanent storage Remember to clear things in time after using them

If the amount of data is too large, do not store it locally and change it to dynamic acquisition

You can use Indexeddb with larger storage capacity, but there is compatibility Question

You can limit the number of words to be stored in storage in the implementation plan

Make full and reasonable use of the H5 features of sessionstorage and localstorage

For example: list data is stored in In fact, vuex will also be stored in localstorage

For example: some data for form verification uses sessionstorage

3. Others

3.1. Extension

This can be deduced to the processing of events. Useless events must be cleaned up in time when exiting the vue component.

For example: this.bus.$on('aa') should be used this.bus.$off('aa') uninstall event

3.2. Character length acquisition

var len = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
  len += 2 //如果是全角，占用两个字节 如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
 else
  len += 1 //半角占用一个字节
}
return len

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

JS plug-in for Web forms (high-quality recommendation)

How to implement online customer service function in jQuery

How to dynamically add to the list in jQuery

About optimization configuration issues in Webpack

In How to build Electron applications in Webpack

Issues about unsafe image paths using Angular4

How to implement the cross coordinates following mouse effect in JS

How to use EasyUI window in jQuery

How to use laydate.js date plug-in in Angular4.0

How to implement label scrolling switching in JS

The above is the detailed content of How to use localstorage and sessionstorage in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055518 fails to install in Windows 10?

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

1 months ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1423

Laravel Tutorial

1317

PHP Tutorial

1268

C# Tutorial

1246

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to add functions to buttons for vue Apr 08, 2025 am 08:51 AM

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

How to use watch in vue Apr 07, 2025 pm 11:36 PM

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

How to return to previous page by vue Apr 07, 2025 pm 11:30 PM

Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.

What does vue multi-page development mean? Apr 07, 2025 pm 11:57 PM

Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.

React vs. Vue: Which Framework Does Netflix Use? Apr 14, 2025 am 12:19 AM

Netflixusesacustomframeworkcalled"Gibbon"builtonReact,notReactorVuedirectly.1)TeamExperience:Choosebasedonfamiliarity.2)ProjectComplexity:Vueforsimplerprojects,Reactforcomplexones.3)CustomizationNeeds:Reactoffersmoreflexibility.4)Ecosystema

How to reference js file with vue.js Apr 07, 2025 pm 11:27 PM

There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.

How to use vue traversal Apr 07, 2025 pm 11:48 PM

There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.

See all articles