在knockoutJS中为observableArray在客户端持久化数据

Persists data on client side for observableArray in knockoutJS

本文关键字：持久化 数据 客户端 observableArray knockoutJS 中为      更新时间：2023-09-26

我正在尝试实现一个购物车与knockoutjs。

我的问题是，每当用户导航到网站的其他页面时，购物车中的数据(使用observableArray创建)不会持续存在。

我想要的是当用户导航到不同的类别时，他/她应该能够查看在前一个类别中排序的数据。

我的HTML文件:

<div class="orderSegement" data-bind="visible: viewOrderTab()">
    <section>
        <h2 class="hidden">Order</h2>
        <article class="OrderedItems">
            <div class="headindOrder headindOrderLeft0">Name</div><div class="headindOrder headindOrderLeft25">Price</div><div class="headindOrder headindOrderLeft50">Qty</div>
            <div data-bind="foreach: orderList">
                <div class="OrderData" data-bind="visible: ProductQty">
                    <label data-bind="text: ProductName"></label>
                    <label data-bind="text: ProductPrice"></label>
                    <label data-bind="text: ProductQty"></label>
                    <a href="#" data-bind="click: $root.removeFromList">Remove</a>
                </div>
            </div>
            <label data-bind="visible: totalPrice, text: totalPrice"></label>
            <button class="button" data-bind="click: viewOrder">Hide</button>
            <button class="button" data-bind="visible: totalPrice, click: submitToServer">Order</button>
        </article>
    </section>
</div>
我viewModelFile 

self.orderList = ko.observableArray(null, {persist: 'orderList'});

我试图通过knockout.localStorage.js实现这一点。然而，我还没有能够成功地实施它。knockout.localStorage.js只适用于ko.observable()变量吗?或者它是否支持ko。observableArray或ko.computed，如果是，那么如何?

由于您没有提供任何特定的错误，因此很难预测错误。但是，这里有一个淘汰赛的例子。持久化并淘汰可观察数组。您可以使用它来测试您的代码是否有错误，或者您有一些浏览器兼容性问题。

检查小提琴，如果它也在你的浏览器上工作，重新检查你的代码与一些额外的断点。

这里有一些建议;

在淘汰赛中。持久化代码，可能会对您隐藏真正的错误。首先检查这个catch是否被击中。

  // Load existing value if set
  if(key && localStorage.hasOwnProperty(key)){
    try{
      initialValue = JSON.parse(localStorage.getItem(key)); 
    }catch(e){};
  }

然后用JSON.parse(yourValue)和ko.toJSON(yourValue)检查你的值，并确保它们与你的可观察数组工作得很好。

然后检查您的值是否被保存到本地存储中，为此您应该观察清除过程。保存设置本地存储项的代码(您可以在保存后立即获取项键(这里是如何获取本地存储的所有键)，以检查是否成功保存):

  if(key){
    observable.subscribe(function(newValue){
      localStorage.setItem(key, ko.toJSON(newValue)); // try to get item right after this.
    });
  };

如果保存成功，刷新页面，并再次获取本地存储密钥，检查它们是否还在。

我的建议就这些

相关文章：