Vue将数据存放在会话存储中

前言:

会话存储(session Storage):当浏览器被关闭的时候,存在session中的数据就会消失。

本地存储(local Storage):在本地存储的数据会永远保留,除非你自己删除,要不然一直在。

1、设置

复制代码
// 数据监听属性
watch: {
// 将添加的数据存放到session中
    tableList() {
        sessionStorage.setItem('tableList', JSON.stringify(this.tableList))
    }
},

2、获取

复制代码
<script>
    new Vue({
        el:'#app',
        data:{
           // 再从浏览器中获取刚在存储的数据,如果没有数据就空数组占用
           tableList:JSON.parse(sessionStorage.getItem('tableList') || '[]'),
        }
    })
</script>
相关推荐
羊小猪~~21 分钟前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
晚风资源组1 小时前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu2 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
摘星编程2 小时前
React Native for OpenHarmony 实战:Swiper 滑动组件详解
javascript·react native·react.js
鸣弦artha2 小时前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
QQ4022054963 小时前
python基于vue的大学生课堂考勤系统设计与实现django flask pycharm
vue.js·python·django
光影少年3 小时前
前端如何调用gpu渲染,提升gpu渲染
前端·aigc·web·ai编程
Surplusx4 小时前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
小宇的天下4 小时前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
LongJ_Sir4 小时前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript