Persisting data in angular using localstorage or web storage

[Billy Figueroa]

Hey Guys,

I just need some input about how most people are handling persisting data in angular since a page refresh will wipe out the data. I have seen a previous post where people recommended things like breeze.js and persistence.js but what is wrong with just using the html5 local storage api?

it looks like it is supported in all browsers so why not use it? I am working with a PHP/ MySQL backed and I don't want to use something like breeze because it does more than I need. I m looking to just use sessionStorage to keep the data active until the user closes the browser.

Let me know what ya think

[Tony pee]

using sessionStorage is totally fine. especially if you have to support things like ie8. We use it extensively. localStorage is also useful for message passing and intertab coms. 

You should be aware that: 

- there is a 5MB limit

- all values are a key/value pair storing values as a STRING

- you can just JSON to store more complex values.

- in firefox the storage is shared across ALL sessions of that top level domain- eg. myapp.someting.com & cms.something.com both share the 5mb space. except they do not have access to eachothers session, as so cannot clean up. This can be annoying. Especially since it is NOT removed on browser close, as state is recreated. I cant find the bug link, but people have been complaining. We ran into the issue, and just had to reduce the size of what we store. 

other trivial notes that you might find interesting:

- internet explorer 8-10 (not sure about 11) break the spec for the 'storage' event. When you change a value, you can listen on other tabs/windows for a storage event (for localStorage) and use this to keep tabs in sync. The event should be sent out to OTHER tabs. IE sends the event to itself (the tab of origin) also. You need to wrap the value and id your tabs to fix this afaik. 

- localStorage is shared memory. chrome runs different processes for each tab. reads and writes (getItem, setItem) are atomic, meaning that you will never have the issue that two tabs write at the same time, but you DO have the issue that since your read, another tab might have mutated the value - even if you have the read and write (if you are appending to an array for instance) in consecutive lines of javascript. There is no way to reliably *lock the localstorage, via a mutex or semaphore - to allow for a 'transaction' to be performed, since creating a spinlock requires processing on the background tabs, and chrome buffers and limits processing for background tabs. SO, you can delegate a *master, via consensus. If you need a reliable way to write and sync data between tabs. Ill be hopefully releasing code that ive made for this at some point - its pretty simple, just use the storage event with heartbeats, etc, to delegate master. 

But in general, for simple usage, and just hydrating state between page refreshes.. yes. its perfect for that ;P

cheers

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Tony Polinelli

[Billy Figueroa]

My goodness lol so much info. Thanks for sharing.

I ll have to digest some of this slowly. I think initially all I need to keep track of is the session data I have created in PHP when someone refreshes. Other than that I m keeping all the data on the backend. I just need to make sure my boolean "userIsAuthenticated" remains set to true until a user logs off or quits the browser