English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. 项目使用中暴露出来的几个问题
大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多
项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染
因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用
2. 解决办法
封装storage的使用方法，统一处理
规范storage的key值的命名规则
规范storage的使用规范
2.1. 封装统一的方法
封装成方法可以降低耦合度，可以方便切换实现方式，可以控制存储量大小
改变实现可以通过配置不同的参数来实现
编辑如图所示的项目结构
代码实现
/*
* 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 '@/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') */
/* */
/* */
/* 2、SessionStorage的使用 */
/* storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'}) */
/* */
/* */
// TODO:实现其他方法
// 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'
/*
/* 函数体 */
/* */
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(){},
// Получить максимальное пространство для хранения: этот метод доступен только для 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
// .length общее количество данных, например: localStorage.length
// .key(index) получить ключ, например: var key=localStorage.key(index);
// Примечание: данные, хранящиеся в localStorage, не могут быть共用ны между браузерами, каждый браузер может читать только свои данные, объем хранилища 5М.
// настройка времени ожидания
// 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
// }));
// } catch (e) {}
// } 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
* Реализация 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('Текущий браузер не поддерживает localStorage!')
}
var test = '0123456789'
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 exceeds the maximum limit')
clearInterval(show)
}
}, 0.1)
},
// Получение использованного пространства 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使用容量为' + (size / 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 = '0123456789'
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 exceeds the maximum limit')
clearInterval(show)
}
}, 0.1)
},
// Получение использованного пространства localstorage
getUsedSpace(){
if (!window.sessionStorage) {
console.log('Браузер не поддерживает sessionStorage')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size += window.sessionStorage.getItem(item).length
}
}
console.log('Текущий объем использования sessionStorage составляет' + (size / 1024).toFixed(2) + 'KB')
}
}
/*
* cookies.js
* Реализация cooikes, вероятно, не будет реализована в этой жизни
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
/*
* json.js
* Реализация json, вероятно, не будет реализована в этой жизни
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
2.2. Нормативное использование命名ного пространства
Чтобы предотвратить загрязнение ключевых значений, мы можем разумно использовать命名ное пространство
Мы можем определить命名ное пространство, но не можем хранить много данных в одном объекте, так как количество операций, которые нужно выполнить, будет слишком большим
Например, глобальные в разделе global
Например, добавление суффикса системы к различным функциональным системам
Нормативный документ о命名ном пространстве системы должен быть спроектирован заранее, иначе в процессе реального разработки много людей не будут использовать правила
Вещи,используемыеglobально,должныбытьотображенывдокументеREADME.md
Пример
* localStorage['SGQ.global.userAuthor']：информацияопользователяхвошлиздесь,меню,организация,группа * localStorage['SGQ.global.systemName']：названиесистемы,вкоторуювошли * localStorage['SGQ.vuex.state']:адресхраненияstateвvuex,вкотороместьвсё * localStorage['SGQ.wms.warehouse']:информацияоцене,необходимойwms + localStorage['SGQ.wms.warehouse'].permissionId + localStorage['SGQ.wms.warehouse'].dataResource * localStorage['SGQ.tms.org']:информацияоузелах,необходимыхtms + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. нормывиспользованииstorage
2.3.1. Причинапроблемы
Этотпроблемапроизошлаиз-затого,чтонамнедобиветьсяправогоприступа,априрегистрациипостоянноотчётобнедостаточностипространствахранения,поисследовавпричину,обнаружили,чтозаднийконецвозвратилвсёнесколькотысячданныхадминистраторов,доходящиепоэтомунедостаточно,впоследствиенаписалиизменениявинтерфейсзаднегоконцаирешилипроблему
Ноэтотслучайдаетнамнескольковопросов?
Объемхраненияlocalstorageиsessionstorageвразныхбраузерахвбазесоответствует5М
Хранениеlocalstorageиsessionstorageсопутствуетдомену
Вlocalstorageнаboss.hivescm.comтакжестоит5М
Вlocalstorageнаb2b.hivescm.comтакжестоит5М
Дажееслипроблемасейчасрешена,нонамнедобрыйплан,полностьюиспользоватьпространствolocalstorageиsessionstorageвдомене,всего10М
2.3.2. схемаиспользованияstorage
Вещи,используемыеglobально,общиеиvoorвечноехранениехранятсявlocalstorage
Необходимоудалитьвещи,которыенеобходимыдляпостоянногохранения,послеиспользования
Еслиобъемданныхслишкомбольшой,нехранитеихлокально,перейдитенадинамическое��取
Можно использоватьIndexeddbсбольшейемкостью,ноестьпроблемыссовместимостью
Можно ограничить количество символов для хранения в storage в реализационном плане
Полное и рациональное использование характеристик H5 sessionStorage и localStorage
например: данные списка хранятся в vuex, но также хранятся в localStorage
например: данные для проверки формы хранятся в sessionStorage
3. Другое
3.1. Расширение
Таким образом, это можно распространить на обработку событий, не используемые события необходимо своевременно удалить при выходе из компонента vue
например: чтобы удалить событие, используется this.bus.$off('aa') после this.bus.$on('aa')
3.2. Получение длины символа
var len = 0
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //полные символы
len += 2 //занимает два байта, если полные символы, если в mysql某 field является text, если установлено кодирование utf-8, то один китайский символ занимает три байта, gbk два байта
else
len += 1 //занимает один байт в полужирном шрифте
}
возврат len
Вот все, что я собрал о использовании localstorage и sessionstorage в Vue, спасибо за поддержку руководства呐喊.
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему владельцу, контент предоставлен пользователями Интернета в качестве добровольного вклада и загружен самостоятельно, сайт не обладает правами собственности, не прошел редактирование вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для подачи жалоб и предоставления соответствующих доказательств. В случае подтверждения, сайт немедленно удалил涉嫌侵权的内容.