在敲除JS中为observableArray保留客户端数据

Question

我正在尝试使用 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>

我的视图模型文件

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

我试图通过 knockout.localStorage.js 实现这一目标。 但是我无法成功实施它。 knockout.localStorage.js 是否仅适用于 ko.observable() 变量？ 或者它是否支持 ko.observableArray 或 ko.computed，如果支持，那么如何？

Answer 1

由于您没有提供任何具体错误，因此很难预测错误。但是，这里有一个带有敲除可观察数组的 knockout.persist working example。您可以使用它来测试您的代码是否有错误，或者您是否遇到了一些浏览器兼容性问题。

检查小提琴是否也在您的浏览器上工作，重新检查您的代码并添加一些额外的断点。

这里有一些建议；

knockout.persist 代码中的 try catch 块可能对您隐藏了真正的错误。首先检查这个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) 检查您的值，并确保它们与您的可观察数组配合良好。

然后检查您的值是否已进入本地存储，为此您应该查看设置本地存储项目的 knockout.persist 代码（您可以在保存后立即获取项目密钥 (here is an how-to get all keys of localstorage) 以检查它是否保存成功）：

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

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

我能建议的就这么多