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>

我的viewModelFile

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

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

Answer 1

由于您没有提供任何特定错误，因此很难预测错误。但是，这是一个working example的knockout.persist与knockout observable array。您可以使用它来测试代码是否有错误，或者您遇到了一些浏览器兼容性问题。

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

这里有一些建议;

尝试在knockout.persist代码中捕获块，可能会隐藏您的真实错误。首先检查这个捕获物是否没有被击中。

  // 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）检查您的值，并确保它们适用于您的可观察数组。

然后检查您的值是否已进入本地存储，因为您应该观察设置localstorage项的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.
    });
  };

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

这就是我能建议的所有内容

在knockoutJS中为observableArray保留客户端数据

1 个答案: