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>
相关推荐
井柏然14 小时前
从 Monorepo 重温 ESM 的模块化机制
前端·javascript·前端工程化
晓得迷路了14 小时前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
XXX-X-XXJ14 小时前
Vue Router完全指南 —— 从基础配置到权限控制
前端·javascript·vue.js
云和数据.ChenGuang14 小时前
vue钩子函数调用问题
前端·javascript·vue.js
鹏多多15 小时前
React动画方案对比:CSS动画和Framer Motion和React Spring
前端·javascript·react.js
亿元程序员15 小时前
8年游戏主程,一篇文章,多少收益?
前端
IT_陈寒15 小时前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫15 小时前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'15 小时前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师15 小时前
译: 构建高效 AI Agent 智能体
前端·node.js·agent