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

最新推荐文章于 2024-06-11 16:54:09 发布

原创最新推荐文章于 2024-06-11 16:54:09 发布 · 884 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前言：

会话存储（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>