目录
vuex | localstorage | cookie | session | |
存储位置 | 内存里 | 本地浏览器 | 浏览器 | 服务端 |
功能 | 组件间交互 | 跨页面交互 | 常用于前端记住密码 | 常用于服务器端存储数据 |
持久性 | 刷新消失 | 永久 | 永久 | 永久 |
大小 | - | - | 限制4 kb | 不限大小 |
数据类型 | - | - | 字符串 | 任何类型 |
此篇文章总结数据存储的几个方法以及它们的区别。
1.vuex
2.localstorage
数据存储的方法之localstorage_甜甜的嘛.的博客-CSDN博客
3.session
数据存储的方法之session_甜甜的嘛.的博客-CSDN博客
4.vuex和localstorage的区别
1.保存状态不同
vuex存的是状态,存储在内存里;localStorage是浏览器提供的接口,存的是接口,以文件的形式存储到本地。
2.使用场景不同
vuex常用于不同组件间传值,是响应式的,localstorage常用于不同页面之间传值。
3.永久性不同
刷新页面时vuex存储的值会消失,localstorage的值不会消失。
注意:localStorage 保存对象的时候,需要先将对象转换成json字符串,然后获取的时候在转换成对象形式
5.cookie和session的区别
1.保存状态不同
cookie保存在浏览器端,session保存在服务器端。
2.存储内容不同
cookie只能保存字符串,session支持任何类型。
3.存储大小不同
单个cookie保存数据不能超过4KB,session大小没有限制。
4.安全性不同
session的安全性比较强,针对cookie存在的攻击有:cookie欺骗,cookie截获;而sessionID是存储在cookie中的,多了一层加密保护。
5.使用方式不同
关于cookie
Cookie是服务器发给客户端的信息,以文本的方式保存在客户端,每次请求时都带上它。
如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据 仍然存在,直到过期时间结束才消失。
关于session
当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含session id。如果有session id,服务器将根据该id返回对应session对象。如果客户端请求中没有,服务器会创建新的session对象,并把 session id在本次响应中返回给客户端。通常使用cookie方式存储session id到客户端,在交互中浏览器按照规则将session id发送给服务器
6.Cookie实现前端记住密码
1.下载插件,并导入到项目中
npm install js-cookie;
import Cookies from 'js-cookie';
2.判断是否勾选记住密码,并进行操作
// 登录成功后 判断是否选择了勾选密码
if (isRemenber) {
//添加cookie
Cookies.set('userName', ruleForm.userName, {
expires: 30
})
//使用crypto-js进行加密(需要npm加载后引入) 并存储到cookie中 此处user123! 为秘钥
Cookies.set('userPwd', CryptoJS.AES.encrypt(ruleForm.password,'user123!'), {
expires: 30 // 存储30天
})
} else {
// 删除cookie
Cookies.remove('userName')
Cookies.remove('userPwd')
}
3.下次进来时判断cookie中的用户名和密码是否存在
const userName = Cookies.get('userName') ? Cookies.get('userName') : '';
const enPassword = Cookies.get('userPwd') ? Cookies.get('userPwd') : '';
if (enPassword) {
// 对密码进行解密
ruleForm.password CryptoJS.AES.decrypt(enPassword,'user123!').toString(CryptoJS.enc.Utf8);
// 将是否记住密码置为true
isRemenber = true;
} else {
ruleForm.password = '';
}