Explicación detallada del uso de localstorage y sessionstorage en Vue

1. Problemas expuestos en el uso del proyecto

La gente usa directamente estas sintaxis nativas como localStorage['aaa']='This is a sample string' en todas partes, lo que resulta en una alta耦合度，si algún día necesitamos cambiar la forma de implementación o hacer algún control sobre el tamaño de almacenamiento, entonces se necesitará modificar mucho código

En proyectos grandes, los nombres de las claves elegidos por todos pueden repetirse, y esto también puede causar contaminación global

Debido a que el uso de localStorage no es estándar, se ha producido un desperdicio de espacio de almacenamiento y falta de espacio

2. Solución

Encapsular el uso de storage y manejarlo de manera unificada

Especificar las reglas de nombramiento de las claves de storage
Especificar el uso de storage

2.1. Definición de métodos unificados

La encapsulación en métodos puede reducir la耦合度，facilitar la transición entre diferentes métodos de implementación y controlar el tamaño del almacenamiento

El cambio de implementación se puede lograr mediante la configuración de diferentes parámetros

Edite la estructura del proyecto como se muestra en la figura

Implementación del código

/*
 * storage.js
 */
/*
 * @Author: 石国庆
 * @Desc: Encapsulación de métodos para almacenamiento de datos locales
 * @Date: 2017.11.14
 * @Ref:
 *  https://github.com/WQTeam/web-almacenamiento-cache
 *  https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 * @Explain:Para evitar la creación de nuevos objetos, solo se puede escribir un poco más
 * @Example:
 *
 * 1、LocalStorage的使用
 * import storage from '@/utils/storage.js'
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6])
 * storage.setItem('shiguoqing1},{userId:'dfdf',token:11232323})
 * storage.setItem('shiguoqing2','dfdfdf')
 * console.log(storage.getItem('shiguoqing0'))
 * console.log(storage.getItem('shiguoqing1))
 * console.log(storage.getItem('shiguoqing2))
 * storage.removeItem('shiguoqing2)
 *
 *
 * 2y el uso de SessionStorage
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
 *
 * */
// TODO: implementación de otros métodos
// TODO: configuración del tiempo de expiración
/*
 * implementación del método
 * */
import local from '.'/almacenamiento/localstorage.js'
import session from '.'/almacenamiento/session.js'
import cookies from '.'/almacenamiento/cookies.js'
import json from '.'/almacenamiento/json.js'
/*
* cuerpo de la función
* */
let storage= {
 config:{
  type:'local',// 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 'local':return local;break
   case 'session':return session;break
   case 'cookies':return cookies;break
   case 'json':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(){},
 // Obtener el espacio de almacenamiento máximo: solo LocalStorage y SessionStorage pueden usar este método
 getMaxSpace(options){
  let store=this.getStorage(options)
  store.getMaxSpace()
 },
 // Obtener el espacio utilizado: solo LocalStorage y SessionStorage pueden usar este método
 getUsedSpace(options){
  let store=this.getStorage(options)
  store.getUsedSpace()
 }
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、recorrer las claves almacenadas en localStorage
//  .length总量 de datos, por ejemplo: localStorage.length
//  .key(index) obtener la clave, por ejemplo: var key=localStorage.key(index);
// Nota: Los datos almacenados en localStorage no son compartidos entre navegadores, cada navegador solo puede leer los datos de su propio navegador, espacio de almacenamiento5M.
// Configuración de tiempo de expiración
// function(st, key, value, expires) {
//  if (st == 'l') {
//   st = window.localStorage;
//   expires = expires || 60;
//  } else {
//   st = window.sessionStorage;
//   expires = expires || 5;
//  }
//  if (typeof value != 'undefined') {
//   try {
//    return st.setItem(key, JSON.stringify({
//     data: value,
//     expires: new Date().getTime() + expires * 1000 * 60
//    });
//   }
//  } else {
//   var result = JSON.parse(st.getItem(key) || '{}');
//   if (result && new Date().getTime() < result.expires) {
//    return result.data;
//   } else {
//    st.removeItem(key);
//    return null;
//   }
//  }
// }

/*
 * localstorage.js
 * Implementación de localstorage
 */
// Este es un poco extraño, el nombre del archivo es local.js y no se puede analizar como un archivo js
export default {
 getItem(key){
  let item = localStorage.getItem(key)
  // Este punto debe determinar si es una cadena o un objeto
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // Este punto debe determinar si es una cadena o un objeto
  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(){},
 // Obtener la capacidad máxima de almacenamiento de localStorage
 getMaxSpace(){
  if (!window.localStorage) {
   console.log('El navegador actual no admite localStorage!')
  }
  var test = '0'123456789'''
  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('test')
    window.localStorage.setItem('test', sum)
    console.log(sum.length / 1024 + 'KB')
   }
    console.log(sum.length / 1024 + 'KB excede el límite máximo')
    clearInterval(show)
   }
  }, 0.1)
 },
 // Obtener el espacio utilizado por localStorage
 getUsedSpace(){
  if (!window.localStorage) {
   console.log('El navegador no admite localStorage')
  }
  var size = 0
  for (item in window.localStorage) {
   if (window.localStorage.hasOwnProperty(item)) {
    size += window.localStorage.getItem(item).length
   }
  }
  console.log('La capacidad de uso actual de localStorage es ' +  / 1024).toFixed(2) + 'KB')
 }
}

/*
 * session.js
 * La implementación de sessionStorage
 */
export default {
 getItem(key){
  let item = sessionStorage.getItem(key)
  // Este punto debe determinar si es una cadena o un objeto
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // Este punto debe determinar si es una cadena o un objeto
  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(){},
 // Obtener la capacidad máxima de almacenamiento de localStorage
 getMaxSpace(){
  if (!window.sessionStorage) {
   console.log('El navegador actual no admite sessionStorage!')
  }
  var test = '0'123456789'''
  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('test')
    window.sessionStorage.setItem('test', sum)
    console.log(sum.length / 1024 + 'KB')
   }
    console.log(sum.length / 1024 + 'KB excede el límite máximo')
    clearInterval(show)
   }
  }, 0.1)
 },
 // Obtener el espacio utilizado por localStorage
 getUsedSpace(){
  if (!window.sessionStorage) {
   console.log('El navegador no admite sessionStorage')
  }
  var size = 0
  for (item in window.sessionStorage) {
   if (window.sessionStorage.hasOwnProperty(item)) {
    size +
   }
  }
  console.log('La capacidad de uso actual de sessionStorage es ' +  / 1024).toFixed(2) + 'KB')
 }
}

/*
 * cookies.js
 * La implementación de cooikes, probablemente no tendré tiempo para implementarla en esta vida
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

/*
 * json.js
 * La implementación de json, probablemente no tendré tiempo para implementarla en esta vida
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.2. Uso normativo del espacio de nombres

Para evitar la contaminación de los valores de clave, podemos usar razonablemente el espacio de nombres

Podemos definir el espacio de nombres, pero no podemos almacenar muchos datos en el mismo objeto, de lo contrario, la cantidad de operaciones posteriores será demasiado grande

Por ejemplo, las cosas globales deben estar debajo de global

Por ejemplo, agregar el prefijo del sistema a cada sistema funcional

Una norma de nombre de espacio de un sistema debe ser diseñada con anticipación, de lo contrario, durante el desarrollo real, muchas personas no seguirán las reglas

Las cosas que se utilizan globalmente deben ser reflejadas en el documento README.md

Ejemplo

* localStorage['SGQ.global.userAuthor']: toda la información del usuario de inicio de sesión está aquí, menú, organización, grupo
* localStorage['SGQ.global.systemName']: el nombre del sistema de inicio de sesión
* localStorage['SGQ.vuex.state']: la dirección de almacenamiento del estado de vuex, aquí hay todo tipo de cosas
* localStorage['SGQ.wms.warehouse']: la información de depósito necesaria para wms
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['SGQ.tms.org']: la información de puntos de venta necesarios para tms
+ localStorage['SGQ.tms.org'].permissionId
+ localStorage['SGQ.tms.org'].orgName

2.3. Normas de uso de storage

2.3.1. Causa del problema

La generación de este problema se debe a que queremos hacer un inicio de sesión de permisos, y durante el inicio de sesión, siempre se informa de que no hay suficiente espacio de almacenamiento, después de investigar la causa, se descubrió que el backend regresó todos los miles de datos de los superadministradores, lo que resultó en que no había suficiente espacio, después de modificar el contenido de los datos regresados por la interfaz del backend, se resolvió este problema.

Pero este incidente nos ha traído algunos puntos de reflexión?

La cantidad de almacenamiento de localStorage y sessionStorage es básicamente la misma en diferentes navegadores5M

El almacenamiento de localStorage y sessionStorage sigue el nombre de dominio

El almacenamiento localStorage en boss.hivescm.com es5M

b2El almacenamiento localStorage en b.hivescm.com también es5M

Aunque este problema se resolvió esta vez, deberíamos establecer un plan para aprovechar al máximo el dominio, la common de localStorage y sessionStorage10M espacio

2.3.2. Solución de almacenamiento storage

Las cosas que se utilizan globalmente, las cosas compartidas y las cosas que se almacenan permanentemente se almacenan en localStorage

Las cosas que no necesitan almacenamiento permanente deben ser eliminadas en el momento adecuado después de su uso

Si la cantidad de datos es grande, no almacenar en el local, convertirse en la obtención dinámica

Se puede usar Indexeddb con mayor capacidad de almacenamiento, pero hay problemas de compatibilidad

Se puede hacer una restricción de palabras en la cosa que se va a almacenar en storage en el plan de implementación

Utilizar plenamente y razonablemente sessionStorage y localStorage H5Características

Por ejemplo: los datos de lista almacenados en Vuex también se almacenarán en localStorage

Por ejemplo: algunos datos de validación de formulario se utilizan en sessionStorage

3. Otros

3.1. Extensión

Por lo tanto, se puede extender a la gestión de eventos, los eventos innecesarios deben ser limpiados a tiempo cuando se sale del componente Vue

Por ejemplo: this.bus.$on('aa') se debe desactivar el evento con this.bus.$off('aa')

3.2. Obtener la longitud de los caracteres

var long = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //Ancho completo
  long += 2 //Si es de ancho completo, ocupa dos bytes, si en mysql hay algún campo es text, si se configura la codificación como utf-8, por lo tanto, un carácter chino ocupa3bytes, gbk son dos bytes
 otro
  long += 1 //Un carácter de ancho de caracteres ocupa un byte
}
devolver long

Esto es todo el contenido sobre el uso de localStorage y sessionStorage en Vue que he recopilado, gracias por tu apoyo a Tutorial de Gritos.

Declaración: El contenido de este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee derechos de propiedad, no ha sido editado por humanos y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando pruebas relevantes.3Declaración: El contenido de este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee derechos de propiedad, no ha sido editado por humanos y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando pruebas relevantes. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.