vue开发之数据存储sessionStorage、localStorage

一、sessionStorage定义及使用

1.定义

    sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2.使用

• sessionStorage的写入

  1. sessionStorage.lastname = 'lastname' // 点(.)运算符
  2. sessionStorage['lastname'] = 'lastname' // 方括号([])运算符
  3. sessionStorage.setItem('lastname', 'lastname') // sessionStorage.setItem

• sessionStorage的读取

  1. sessionStorage.lastname // 点(.)运算符
  2. sessionStorage['lastname'] // 方括号([])运算符
  3. sessionStorage.getItem('lastname') // sessionStorage.getItem

• sessionStorage删除

  1. sessionStorage.removeItem('lastname') // 删除指定内容
  2. sessionStorage.clear() // 删除sessionStorage存储的所有内容

二、sessionStorage的二次封装

1.定义封装缓存文件/common/session.js

// 对本地数据进行操作的相关方法 sessionStorage的封装
const Session = {
  getItem(key) {
    const item = sessionStorage.getItem(key)
    // 判断是字符串还是对象
    const result = /^[{\[].*[}\]]$/g.test(item)
    if (result) {
      return JSON.parse(item)
    } else {
      return item
    }
  },
  setItem(key, value) {
    // 判断是字符串还是对象
    if (typeof value === 'string') {
      sessionStorage.setItem(key, value)
    } else {
      const item = JSON.stringify(value)
      sessionStorage.setItem(key, item)
    }
  },
  removeItem(key) {
    sessionStorage.removeItem(key)
  },
  clear() {
    sessionStorage.clear()
  }
}

export {
  Session
}

2.在main.js中使用

import {Session} from './common/session.js'
Vue.prototype.$session = Session

3.在页面中使用

var lastname = 'lastname'
this.$session.setItem('lastname', lastname)
console.log(this.$session.getItem('lastname'))

三、localStorage定义及使用

1.定义

localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

提示: 如果你只想将数据保存在当前会话中，可以使用sessionStorage属性， 改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2.使用

localStorage的用法和sessionStorage基本一致，可参照上文sessionStorage的用法。这里就不再阐述了。

四、总结

1.区别

• sessionStorage：生命周期是临时，仅在当前会话窗口有效，关闭页面或浏览器数据就会自动被清除。sessionStorage的作用域是窗口、协议、主机名、端口。
• localStorage：生命周期是永久，除非主动清除localStorage信息，否则这些信息将一直存放在客户端。localStorage的作用域是协议、主机名、端口。一般的浏览器能存储的是5MB左右

2.使用场景

     sessionStorage/localStorage主要用于不同页面之间的传值。

3.特点

• 不同浏览器之间无法共享sessionStorage或localStorage中的数据。
• sessionStorage和localStorage可以使用统一的API接口。
• sessionStorage和localStorage都只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON.stringify(obj)将其转成字符串，取出来时使用 JSON.parse(str)重新转成对象。由于在开发过程中容易忘记将复杂的对象转换成字符串来进行存储，而对sessionStorage/localStorage的二次封装很好的解决了这个问题。
• sessionStorage或localStorage是HTML5的新属性，所以需要较新的浏览器才支持。