vue-05 sessionStorage封装

1.Cookie、localStorage、sessionStorage

1.1三者区别

1.2为什么要封装Storage

2.封装

2.1sessionStorage

2.1.1封装成下面形式

2.1.2代码

1.Cookie、localStorage、sessionStorage

1.1三者区别

存储大小： Cookie4k、localStorage5M、sessionStorage据说大小限制为2M左右

有效期：Cookie拥有有效期、localStroage永久存储，sessionStorage会话技术浏览器关闭就没了

存储位置：Cookie会发送到服务器存到内存，Stroage存储到浏览器端，sessionStorage 存到内存

路径：cookie有路径限制、storage存到域名下

API：cookieapi模糊，storage有对应的api

1.2为什么要封装Storage

storage本身有api，但只是简单形式的key/vaue形式

storage只存储字符串，需要手工转成json对象

storage只能一次性清空，不能单个清空

2.封装

2.1sessionStorage

2.1.1封装成下面形式

1	{"user":{"userName":"bushuangli","age":18}}

2.1.2代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

/**
* storage 封装全局数据key
* @type {string}
*/
const STORAGE_KEY= "mail";
export default {
/**
* 存值
* @param key 存储的对象名
* @param value 值
* @param module_name 如果传这个值就是存到那个模块
*/
setItem(key,value,module_name){
if (module_name){
let val = this.getItem(module_name);
val[key] = value;
this.setItem(module_name, val);
}else{
let val = this.getStorage();
val[key] = value;
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
}
},
/**
* 获取某个模块下面的属性
* @param key 只传key就是取mail下的对象
* @param module_name 传moduleName
* @returns {*}
*/
getItem(key,module_name){
if (module_name){
let val = this.getItem(module_name);
if(val) return val[key];
}
return this.getStorage()[key];
},
/**
* 获取所有值
* @returns {any}
*/
getStorage() {
return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
},
/**
* 删除模块的key，删除的模块
* @param key
* @param module_name
*/
clear(key, module_name){
let val = this.getStorage();
if (module_name){
if (!val[module_name])return;
delete val[module_name][key];
}else{
delete val[key];
}
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
}
}