sessionStorage和vuex的理解

一、sessionStorage

1.使用

// key 关键词
// value 存储的数据（string格式）
// 存储sessionStorage
sessionStorage.setItem(key,value)

// 获取sessionStorage
sessionStorage.getItem(key)

// 移除sessionStorage
sessionStorage.removeItem(key)

2.理解

• sessionStorage的生命周期限于当前会话，会话结束时，存储在sessionStorage中的数据将会被清除
• 创建和存储
  • 当使用sessionStorage.setItem进行数据存储时，数据会被存储在当前会话的上下文中
  • 这意味着在同一个浏览器标签或窗口中，你可以通过相同的key获取到存储的value。
• 会话持续时间
  • sessionStorage的数据会在当前会话期间一直有效，会话期间是指用户在同一个浏览器标签或窗口中与网站进行交互的时间段。如果用户关闭了标签或窗口，sessionStorage中存储的数据将会被清除。
• 跨标签或窗口
  • 每个标签或窗口都有自己独立的sessionStorage存储，这意味着如果用户在不同的标签或窗口中打开同一个网站，每个标签或窗口都有自己的sessionStorage存储，彼此不会共享数据
  • 但是，如果是在当前网站中使用window.open在新标签中打开当前的网站，则新标签会拷贝当前网站的sessionStorage的数据，然后存储在新打开的标签的上下文中，之后两个标签之间的sessionStorage互不干扰，各自维护着自己的sessionStorage数据
• 数据清除
  • 当会话结束，即用户关闭了浏览器标签或窗口，sessionStorage中的数据将被自动清除，如果用户手动清除浏览器缓存或数据，也会导致sessionStorage中的数据被清除

3.示例

• 3.1 同一个网站下的同一个标签页

  • sessionStorage是共享的
    • 比如在localhost/page1页面中，设置了session为1
    • 然后在localhost/page2页面中，获取session为1

• 3.2 在同一个网站下的不同标签页

  • 彼此维护着各自的数据，互不干扰
  • 比如在localhost/page1页面中，设置了session为1
  • 然后在新标签页中打开localhost/page1页面中，获取session为null

• 3.3 使用window.open打开同一个网站标签页

  • 在同一个网站中使用window.open打开新的标签页，会拷贝当前网站的sessionStorage数据到新标签页中
  • 之后彼此互不干扰，各自维护着各自的数据
    • 比如在localhost/page1页面中，设置了session为1
    • 然后通过window.open打开新标签页，在新标签中获取session为1
    • 然后在新标签页中修改session为2
    • 回到原来的标签页，获取的session还是为1

二、vuex

2.vuex的理解

• Vuex 是 Vue.js 的状态管理库，用于集中管理应用程序的状态。它将应用程序的状态存储在一个全局的状态树中，并提供了一些用于修改状态的方法，称为 mutations。Vuex 可以帮助你更好地组织和管理应用程序的状态，使得多个组件之间可以共享和响应状态的变化。

• Vuex和sessionStorage的对比

  • 数据规模和复杂性： Vuex适用于管理大型、复杂的应用程序状态，以及在多个组件之间共享状态和响应状态的变化。sessionStorage 适用于存储小量的临时数据，比如用户的登录状态、一些临时设置等
  • 数据的生命周期： Vuex 存储的数据在应用程序的生命周期内持久存在，直到应用程序被关闭，且不同的标签页之间是不共享的，各自维护着各自的store。sessionStorage 存储的数据在用户会话期间持续存在，当用户关闭窗口或标签页时会被清除。
  • 应用程序级别 vs 会话级别： Vuex 存储的状态是应用程序级别的，可以在整个应用程序中共享和访问。sessionStorage 存储的数据是在单个会话内共享的，不同会话之间的数据不会互相影响。