Cookies and the new array component

[TomD]

This may be a bug or it may be that I’m not clear how to use the new feature yet. There are two issues I’m having trouble with.

If an option to delete a cookie is included on a page, this will result in apparently erratic behaviour as the values in the Wappler array will be out of sync with the values in the cookie. It may just be that I haven’t found a way of deleting all array values - or that I’m going about this in the wrong way.

A related problem is that cookies appear to behave erratically when reopening a page containing cookies . The cookie values appear as expected, but again, the array component will be out of sync so adding or removing items to/from the cookie produces apparently erratic results.

The problems are a little difficult to explain. Hopefully this demo will clarify things.

[patrick]

Cookies are very limited in what they can store, best is to serialize the array to a string first arr1.items.join('|') and then get the value back with cookies1.data.mycookie.split('|').

Better is to use the Local Storage which can store more data and we serialize the data for you, so you can insert the array there directly.

[TomD]

I would certainly use local storage for some things, due to the limitations of cookies, but cookies would usually be fine for shopping carts for example.

I’ve only tried out the new array component with cookies but assumed what seem to be problems with cookies would also apply to local storage - or is this not the case? Or would you suggest dealing with local storage in a different way?

[George]

No local storage doesn’t have the limitation of cookies. You can store much larger and complex objects there and we serialize them nicely.

While cookies are really just simple strings only and limited in length

[TomD]

I realize this - I’ve used them quite a bit. I’m still not clear if the issues I raised relate to managing local storage too.

The problems I highlighted in my demo are not really related to a problem or limitation with cookies.

[George]

To understand the Array component and its difference from the cookie, you need to know their storage nature.

The Array component, just as the Variable component - are kind of volatile storage- they are only available within the page life time.

Html5 Storage - Local, Session and Cookie Storage

While Local Storage, Sessions Storage and Cookie Storage - are persistent storage - they are available to all pages of your web site. All within the user browser, so client side. Exception is only Cookies that are also passed to server side.

Live time

So the Array just as the Variable live only within the current page. The advantage of the Array is that is a list of items - so you can much more easy manipulate the list than a simple variable.

Saving Arrays

But to store and preserve the Array (just like Variable) you need to assign it to one of the persistent storage. That can be Local Storage, Sessions Storage and Cookie Storage.

As Arrays can contain also more complex objects like records, it is better to store them in Local/Session Storage and not in Cookies - as those are simple strings.

So to store and also read an Array from a persistent storage like Session you will do:

    <dmx-session-manager id="session1"></dmx-session-manager>
    <dmx-array id="arr1" dmx-bind:items="session1.data.arr1" dmx-on:updated="session1.set('arr1',items,{})"></dmx-array>

This will auto populate the Array from the Session Storage and also when the Array is updated - it will save it back.

You could also save the array into a cookies, but then you need to serialize it your self:

    <dmx-cookie-manager id="cookies1"></dmx-cookie-manager>
    <dmx-array id="arr1" dmx-bind:items="cookies1.data.arr1.split('|')" dmx-on:updated="cookies1.set('arr1',items.join('|'),{})"></dmx-array>

More info

For more detailed in depth comporasson of the various HTML5 Storage possibilities read:

localStorage vs sessionStorage vs Cookies - a Detailed Comparison

Cookies vs localStorage

Web Storage API

https://www.quora.com/What-is-the-difference-between-sessionstorage-localstorage-and-Cookies