数据存储总结篇

置顶甜甜的嘛.

已于 2023-07-28 17:15:21 修改

阅读量71

点赞数

分类专栏： Vue 数据存储文章标签：前端 vue.js

于 2023-07-26 16:00:38 首次发布

本文链接：https://blog.csdn.net/weixin_49734970/article/details/131941286

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

数据存储

4 篇文章 0 订阅

订阅专栏

1.vuex

2.localstorage

3.session

4.vuex和localstorage的区别

	vuex	localstorage	cookie	session
存储位置	内存里	本地浏览器	浏览器	服务端
功能	组件间交互	跨页面交互	常用于前端记住密码	常用于服务器端存储数据
持久性	刷新消失	永久	永久	永久
大小	-	-	限制4 kb	不限大小
数据类型	-	-	字符串	任何类型

此篇文章总结数据存储的几个方法以及它们的区别。

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发送给服务器

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 = '';
    }