时间戳

首页 > 解决方案 > 您刷新页面的数组中的Vuejs数据为空

javascript - 您刷新页面的数组中的Vuejs数据为空

问题描述

我想要做的是永久保留系列中的对象，即使页面被刷新。每当我删除它时，我都希望删除系列中的数据。我怎样才能做到这一点？

new Vue({
   el: '#app',
   data(){
       return {  
           item: []
       }
   },
   methods: {
      addToCart: function(value){
         // This way, I can keep all the data in the item directory. But it is deleted when the page is refreshed.
         this.item.push(value);
      }
   }
})

是空数组产品的名称

我的目标是把选择的产品永久保留在系列中，即使页面刷新了，我也想让系列中的数据永久化，并根据需要处理这些信息。

标签： javascriptvue.js

解决方案

只有将数据存储到 中才能执行此操作localStorage，sessionStorage否则cookies刷新时将消除所有数据。

这是Vue.js关于如何在客户端存储数据的官方文档。基本上，您不必将数据推送到变量中，而是必须将其保存在客户端，localStorage比如下面的代码：

addToCart: function(value){
   const cart = localStorage.getItem('cart');
   cart.push(value);
   localStorage.setItem('cart', cart);
}

但是要小心，sessionStorage, localStorage，并且cookies不仅在它们的 API 上而且在它们的使用上也有一些差异，请查看此以获取更多信息

推荐阅读