本地存储 localstorage

本地存储 localstorage

• localstorage 方法存储的数据没有时间限制，不清空浏览器缓存都可以使用
• 用法&存储：

1. 点(.)运算符： localstorage.userName = 'april'
2. 方括号([])运算符: localstorage['userName'] = 'april'
3. localStorage.setItem: localStorage.setItem("userName", "april")

• 用法&读取：

1. 点(.)运算符： localstorage.userName
2. 方括号([])运算符: localstorage['userName']
3. localStorage.getItem: localStorage.getItem("userName")

本地存储 sessionStorage

• sessionStorage 方法针对一个会话进行数据存储，当用户关闭浏览器窗口后，数据会被删除
• 用法&存储：

1. 点(.)运算符： sessionStorage .userName = 'april'
2. 方括号([])运算符: sessionStorage ['userName'] = 'april'
3. sessionStorage .setItem: sessionStorage .setItem("userName", "april")

• 用法&读取：

1. 点(.)运算符： sessionStorage .userName
2. 方括号([])运算符: sessionStorage ['userName']
3. sessionStorage .getItem: sessionStorage .getItem("userName")

vuex

• vuex 是专为 vue.js 应用程序开发的状态管理模式，采用集中式存储应用的所有组件的状态，并以相应的规则保证状态 1⃣️ 一种可 1⃣ 预测的方式发生变化。
• 使用: 官方文档 (opens new window)

最后

1.区别：vuex 存储在内存，localstorage（本地存储）则以文件的方式存储在本地(电脑的磁盘),永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以使用 ECMAScript 提供的 JSON.stringify(obj)将其转成字符串，取出来时使用 JSON.parse(str)重新转成对象, 存储数字类型的也会变字符串

2.应用场景：vuex 用于组件之间的传值(响应式的)，localstorage，sessionstorage 则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5 刷新,属于清除内存了）时 vuex 存储的值会丢失，sessionstorage 页面关闭后就清除掉了，localstorage 不会。