JS如何使用sessionStorage实现计数器功能
http://mpvideo.qpic.cn/0bc3rmaheaaadeaayq3ipvrvbc6dokfqa4qa.f10002.mp4?dis_k=4031fc91448cb61bf867060e7a7266f8&dis_t=1670378809&vid=wxv_2654159916970229761&format_id=10002&support_redirect=0&mmversion=false
前言
·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
就会丢失
相关文章
- js实现多个异步任务的串行和并行执行(add/sum)
- 使用 Node.js + OPEN AI 实现一个自动生成图片项目
- JS实现新提醒标题闪烁 新提醒详解编程语言
- 如何通过js实现图片轮播效果详解编程语言
- 使用JS实现Redis数据读取(js读取redis)
- js实现ASP分页函数HTML分页函数
- 使用JS+XML(数据岛)实现分页)
- JS简单实用的倒计时效果实现代码
- js使用form表单select类实现级联菜单效果
- .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
- 如何使用jquery动态加载js,css文件实现代码
- js判断背景图片是否加载成功使用img的width实现
- js保留两位小数使用toFixed实现
- 使用js简单实现了tree树菜单
- php不使用js实现页面跳转
- js使用栈来实现10进制转8进制与取除数及余数
- Asp.net程序优化js、css实现合并与压缩的方法
- JS中使用sort结合localeCompare实现中文排序实例
- Node.js中使用事件发射器模式实现事件绑定详解
- node.js中使用q.js实现api的promise化