Persists data on client side for observableArray in knockoutJS

Question

I am trying to implement a shopping cart with knockoutjs.

My issue is whenever user navigates to other pages of website, the data in the shopping cart (which gets created using an observableArray) does not persists.

What I want is when user navigates away to different categories still, he/she should be able view the data ordered in previous category.

My HTML File:

<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>

My viewModelFile

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

I was trying to achieve this via knockout.localStorage.js. However I have not been able to successfully implement it. Does knockout.localStorage.js is applicable only to ko.observable() variables? Or does it support ko.observableArray or ko.computed, if yes then how?

"You can make a ko.observable or ko.observableArray automatically persist its value to localStorage" says in [documentation](https://github.com/jimrhoskins/knockout.localStorage). so it should work on observable array. Can you be more specific on what is not working. — Azadrum, Sep 12 '15 at 07:34
USing this code I am populating my orderList. self.addToCart = function (item, event) { /*get current item index*/ /*in dom element $index() is enough but in viewModel a context is to be obtained*/ var context = ko.contextFor(event.target); var index = context.$index(); var incQty = self.prodList()[index].ProductQty(); incQty++; self.prodList()[index].ProductQty(incQty); self.orderList.push(new ProdList(self.prodList()[index])); }; However when the user navigates to any other page in the website, items in the "orderList" doesnot persists. — DashmeetSingh, Sep 12 '15 at 07:46
All the previous items selected by user disappears from the "orderList" and I am left with blank orderList. Hope this helps. Apologies, I dont how to format code in comments. — DashmeetSingh, Sep 12 '15 at 07:52

score 1 · Answer 1 · edited May 23 '17 at 10:29

Since you didn't provide any specific errors, it is hard to predict the error. But, here is a working example of knockout.persist with knockout observable array. You can use it to test if your code has faults, or you are having some browser compatibility issues.

Check the fiddle if it is working on your browser too, re check your code with some extra breakpoints.

Some suggestions here;

That try catch block in the knockout.persist codes, may be hiding the real error from you. First of all check if this catch is not hit.

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

Then check your values with JSON.parse(yourValue) and ko.toJSON(yourValue) and be sure that those works well with your observable arrays.

Then check that your values made it to the local storage, for that you should watch the knockout.persist codes that sets the localstorage item (you can get item keys (here is an how-to get all keys of localstorage) right after the save to check if it is saved successfully):

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

If they are saved successfully, refresh the page and check if they are still there by getting local storage keys again.

Thats all I can suggest

Thanks for all your effort. Though I fall back on HTML5 localStorage.getItem and localStorage.setItem to achieve what I wanted to. — DashmeetSingh, Sep 13 '15 at 08:21

Persists data on client side for observableArray in knockoutJS

1 Answers1