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存储的key
//     .length 数据总量，例：localStorage.length
//     .key(index) 获取key，例：var key=localStorage.key(index);

// 备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

// 超时设置
//  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')
            } catch (e) {
                console.log(sum.length / 1024 + 'KB超出最大限制')
                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')
            } catch (e) {
                console.log(sum.length / 1024 + 'KB超出最大限制')
                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. 规范命名空间的使用

为了防止key值污染,我们可以合理使用命名空间
- 我们可以定义命名空间，但是不能把很多数据存储在同一对象里面，这样后面的操作量会太大
- 比如全局的在global下面
- 比如各功能系统的加上系统词缀
一个系统的命名空间规范应该提前设计好，否则真正开发起来会有很多人不按照规则使用
全局使用的东西要在README.md文档中体现出来
示例

* localStorage['SGQ.global.userAuthor']：登录的用户信息都在这里,菜单,组织，集团
* localStorage['SGQ.global.systemName']：登录的系统名称
* localStorage['SGQ.vuex.state']:vuex中的state的存储地址，这里面有所有的的东西
* 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的存储量在不同的浏览器中基本是5M
- localstorage和sessionstorage的存储是跟着域名来的
  - boss.hivescm.com下localstorage存储是5M
  - b2b.hivescm.com下localstorage存储也是5M
- 即使这次问题解决了，但是我们应该定一套方案，充分利用一个域名下，localstorage和sessionstorage的共10M空间

2.3.2. storage使用方案

全局使用的东西，共享的东西，永久存储的东西储存在localstorage中
不需要永久存储的东西在使用完毕之后要记得及时清除
如果数据量过大就不要存储在本地了，变为动态获取
可以使用存储量更大的Indexeddb，不过有兼容性问题
可以在实现方案中对要存储到storage中的东西做字数限制
充分合理利用sessionstorage和localstorage的H5特性
- 例如：列表数据存储在vuex中其实也会存到localstorage
- 例如：表单校验的一些数据都用sessionstorage

3. 其他

3.1. 延伸扩展

由此可以类推到事件的处理，没用的事件要及时在退出vue组件的时候清理掉
- 例如： this.bus.$on('aa') 要用 this.bus.$off('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中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
    else
        len += 1 //半角占用一个字节
}
return len

4. 参考和引用

判断浏览器的存储量还剩多少，判断浏览器最大存储量
- https://www.cnblogs.com/MonkeyKingK/p/5499831.html
方法名字可以参考这里面的
- https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

5. 特别感谢

公司的小伙伴

6. 免责说明

本文档中的部分内容摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的coder，不会用于商用。
因为很多博客的地址看完没有及时做保存，所以很多不会在这里标明出处，非常感谢各位大牛的分享，也希望大家理解。
如果原文作者感觉不适，可以及时联系我[email protected],我将及时删除争议部分内容

7. 追责声明

如有大段引用超过全文50%的内容，请在文档结尾标明原文出处：龙马行空-石国庆-朱庇特- https://my.oschina.net/u/1416844/blog ，否则将视为抄袭，予以法律追究，请各位尊重个人知识产权。

原文发布时间为：2017/12/07

原文作者：龙马行空

本文来源：

开源中国 https://my.oschina.net/powertoolsteam/blog/1587811

如需转载请联系原作者

Vue中localstorage和sessionstorage的使用规范1. 项目使用中暴露出来的几个问题2. 解决办法3. 其他4. 参考和引用5. 特别感谢6. 免责说明7. 追责声明

1. 项目使用中暴露出来的几个问题

2. 解决办法

2.1. 封装统一的方法

2.2. 规范命名空间的使用

2.3. storage使用规范

2.3.1. 问题产生的原因

2.3.2. storage使用方案

3. 其他

3.1. 延伸扩展

3.2. 字符长短获取

4. 参考和引用

5. 特别感谢

6. 免责说明

7. 追责声明

继续阅读

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

android 主线程的相关问题

neo4j之cypher使用文档

C经典书籍笔记——C陷阱与缺陷②(语法陷阱之优先级)一、错误案列二、优先级规律

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

mysql使用source命令导入.sql文件

线性表之顺序表的实现

vue-cli简介（中文翻译）

Ajax发送和获取json数据到Spring mvc 1.spring mvc后端2.web前段

C++判断素数、求最大公约数代码判断一个数是否为素数求两个数的最大公约数

SequoiaDB巨杉数据库C++驱动概述

layui多任务上传添加进度条

JSONObject包导入异常 java.lang.NoClassDefFoundErrorweb项目的导入包的问题