一、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的新属性，所以需要较新的浏览器才支持。