English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. Problemas expostos no uso do projeto
Os usuários utilizam diretamente o localStorage['aaa']='Esta é uma string de exemplo'usando a sintaxe nativa, o que resulta em uma alta complexidade de ligação, se precisarmos mudar a maneira de implementação ou controlar o tamanho do armazenamento, muitos códigos precisarão ser modificados
Se o projeto for grande, os nomes das chaves escolhidos pelos usuários tendem a se repetir e também podem causar poluição global
Devido ao uso irregular do localStorage, foi causado o desperdício de espaço de armazenamento e falta de espaço
2. Solução
Encapsular o uso do storage, tratando uniformemente
Padronizar o nome das chaves do storage
Padronizar o uso do storage
2.1. Encapsular métodos padronizados
Encapsular em métodos pode reduzir a complexidade, facilitar a troca de métodos de implementação e controlar o tamanho do armazenamento
A mudança de implementação pode ser realizada ajustando diferentes parâmetros
Edite a estrutura do projeto conforme mostrado na figura
Implementação do código
/*
* storage.js
*/
/*
* @Author: 石国庆
* @Desc: Encapsulamento de métodos de armazenamento de dados locais
* @Date: 2017.11.14
* @Ref:
* https://github.com/WQTeam/web-storage-cache
* https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
* @Explain:Para não criar novos objetos, é necessário escrever várias vezes
* @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)
*
*
* 2e uso de SessionStorage
* storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
*
* */
// TODO: implementação de outros métodos
// TODO: configuração do tempo de expiração
/*
* implementação do método
* */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* corpo da função
* */
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(){},
// Obter o espaço de armazenamento máximo: apenas LocalStorage e SessionStorage podem usar este método
getMaxSpace(options){
let store=this.getStorage(options)
store.getMaxSpace()
},
// Obter espaço utilizado: apenas LocalStorage e SessionStorage podem usar este método
getUsedSpace(options){
let store=this.getStorage(options)
store.getUsedSpace()
}
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、percorrendo as chaves armazenadas no localStorage
// .length总量 de dados, por exemplo: localStorage.length
// .key(index) para obter a chave, por exemplo: var key=localStorage.key(index);
// Nota: Os dados armazenados no localStorage não podem ser compartilhados entre navegadores, cada navegador pode apenas ler os dados do próprio navegador, espaço de armazenamento5M.
// Configuração de tempo de expiração
// 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
* Implementação do localstorage
*/
// Isso é um pouco estranho, o nome do arquivo é local.js e não pode ser analisado como um arquivo 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('当前浏览器不支持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 excedeu o limite máximo')
clearInterval(show)
}
}, 0.1)
},
// Obter o espaço de armazenamento usado no localStorage
getUsedSpace(){
if (!window.localStorage) {
console.log('浏览器不支持localStorage')
}
var size = 0
for (item in window.localStorage) {
if (window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length
}
}
console.log('当前localStorage使用容量为' + / 1024).toFixed(2) + 'KB')
}
}
/*
* 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('当前浏览器不支持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 excedeu o limite máximo')
clearInterval(show)
}
}, 0.1)
},
// Obter o espaço de armazenamento usado no localStorage
getUsedSpace(){
if (!window.sessionStorage) {
console.log('O navegador não suporta sessionStorage')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size +
}
}
console.log('A capacidade de uso atual do sessionStorage é de ' + / 1024).toFixed(2) + 'KB')
}
}
/*
* cookies.js
* A implementação do cooikes, provavelmente não terá tempo de ser implementada neste mundo
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
/*
* json.js
* A implementação do json, provavelmente não terá tempo de ser implementada neste mundo
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
2.2. Uso normativo do espaço de nomes
Para evitar a contaminação de chaves, podemos usar o espaço de nomes de maneira razoável
Podemos definir o espaço de nomes, mas não podemos armazenar muitos dados no mesmo objeto, pois a quantidade de operações posteriores será muito grande
Por exemplo, itens globais devem estar na pasta global
Por exemplo, adicionar sufixo de sistema a cada sistema funcional
Uma norma de nomeação de namespace de sistema deve ser projetada antecipadamente, senão, muitos não seguirão as regras durante o desenvolvimento real
Itens usados globalmente devem ser evidenciados no documento README.md
Exemplo
* localStorage['SGQ.global.userAuthor']: informações do usuário logado estão aqui, menu, organização, grupo * localStorage['SGQ.global.systemName']: nome do sistema logado * localStorage['SGQ.vuex.state']: endereço de armazenamento do state no vuex, onde estão todos os itens * localStorage['SGQ.wms.warehouse']: informações de armazenamento necessárias para wms + localStorage['SGQ.wms.warehouse'].permissionId + localStorage['SGQ.wms.warehouse'].dataResource * localStorage['SGQ.tms.org']: informações de pontos de venda necessárias para tms + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. normas de uso do storage
2.3.1. razão pela qual o problema ocorreu
A origem desse problema é que precisamos fazer login com permissões, e durante o login, continuamente apareceu o problema de falta de espaço de armazenamento. Após investigar a causa, descobrimos que o backend retornou todos os dados de milhares de superintendentes, resultando em falta de espaço. Em seguida, alteramos o conteúdo dos dados retornados pelo backend para resolver esse problema.
Mas esse incidente nos trouxe algumas reflexões?
A capacidade de armazenamento localStorage e sessionStorage é basicamente a mesma em diferentes navegadores5M
O armazenamento localStorage e sessionStorage são determinados pelo domínio
O armazenamento localStorage em boss.hivescm.com é5M
b2O armazenamento localStorage em b.hivescm.com também é5M
Embora o problema tenha sido resolvido dessa vez, devemos estabelecer um plano para aproveitar ao máximo um domínio, a coexistência de localStorage e sessionStorage10M espaço
2.3.2. plano de uso do storage
Itens usados globalmente, compartilhados e armazenados permanentemente são armazenados no localStorage
Itens que não precisam de armazenamento permanente devem ser removidos imediatamente após o uso
Se a quantidade de dados for grande, não armazene em local, torne-o dinâmico para obter
Pode-se usar o Indexeddb com maior capacidade de armazenamento, mas há problemas de compatibilidade
Pode ser feita uma restrição de palavras no item a ser armazenado no storage na implementação do plano
Uso racional e pleno de sessionStorage e localStorage H5Características
Por exemplo: os dados da lista são armazenados no vuex e também no localStorage
Por exemplo: alguns dados de validação de formulário são armazenados em sessionStorage
3. Outros
3.1. Extensão
Portanto, podemos deduzir que o tratamento dos eventos, os eventos inúteis devem ser limpos no momento de sair do componente Vue
Por exemplo: para desativar o evento, use this.bus.$off('aa') no lugar de this.bus.$on('aa')
3.2. Obtenção do comprimento do caractere
var len = 0
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //de largura completa
len += 2 //Se for de largura completa, ocupa dois bytes, se um campo text no mysql for configurado como utf-8, então um caractere chinês ocupa3bytes, gbk são dois bytes
else
len += 1 //O espaço de caractere de largura estreita ocupa um byte
}
return len
Isso é tudo sobre o uso de localStorage e sessionStorage no Vue que o editor organizou. Obrigado pelo seu apoio ao tutorial Yell.
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, fornecido pelos usuários da Internet de forma voluntária e auto-publicada. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)