前言
·sessionStorage·也是本地存储的一种方式,有时候,是需要利用·sessionStorage·来保存某些数据,比如:表格的分页,还有购物车的商品信息,判断是不是首次进入页面等
具体示例
使用sessionStorage实现数据的临时存储
以上的加减计数器,使用了sessionStorage,设置了sessionStorage只在当前窗口有效,当关闭窗口时,sessionStorage就失效了的,这一点是有别于localStorage永久存储的,除非手动删除,而sessionStorage关闭了窗口,sessionStorage设置的值就会消失
API的使用上,两者都是相似的,设置sessionStorage
使用的是sessionStorage.setItem(‘key’,val)``,而获取
sessionStorage`的值是使用
sessionStorage.getItem('key')
<template>
<div class="wrap">
<div class="content">
<el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
mounted() {
// this.num = sessionStorage.getItem('number') || 1;
// 等价于
this.num = sessionStorage.number || 1;
},
methods: {
handleChange(val) {
console.log(val);
//sessionStorage.setItem('number',val)
// 等价于如下
sessionStorage.number = val;
}
},
};
</script>
<style>
.wrap {
text-align: center;
}
</style>
主要的核心代码是 设置sessionStorage
使用的是sessionStorage.setItem('key',val)
// 常用
sessionStorage.setItem('key',val)
// 或者,如下所示,这里的key是你自己设置的存储的字段,val是要具体存入sessionStorage的值
sessionStorage.key = val;
而获取sessionStorage
使用的是sessionStorage.getItem('key')
// 常用
sessionStorage.getItem('key');
// 或者
sessionStorage.key
总结
使用sessionStorage
与localStorage
的用法相似,sessionStorage
,是一种临时存储,可以用于存储大量的数据,只不过它是针对当前的session
会话临时存储的,当关闭了浏览器窗口以后,这个数据就丢失了的
也就是不同的新标签页,sessionStorage
是相互独立的,只要关闭了当前浏览器窗口,那么设置的sessionStorage
就会丢失
![fda2627bd43e4d14b92735ff22c5f6e8.jpeg](https://i-blog.csdnimg.cn/blog_migrate/e3a96a8ed54d4ffd9496d12c36c2defb.jpeg)
![b48f417beded25192b4f4ba1f8bdda59.jpeg](https://i-blog.csdnimg.cn/blog_migrate/2c42e4ed50c3d80bd833572c05ac9385.jpeg)
![4bca16d9d4305eb2feb6cccbe31a6d36.jpeg](https://i-blog.csdnimg.cn/blog_migrate/b042cee71a05135397b64ad25bd52bd9.jpeg)
![753ccb8773635f1075bdbacc88c044fa.jpeg](https://i-blog.csdnimg.cn/blog_migrate/67e0a5036e06206e3ab8a2417de43890.jpeg)
![be1604b2c5b6446f9736ab79025ec486.jpeg](https://i-blog.csdnimg.cn/blog_migrate/27577fe8a320c2c89db79480e783c699.jpeg)
点击左下角查看原文