Looking into LocalStorage or sessionStorage for app

[revdave]

Hi all,

some newbie questions...

I'm looking into localStorage or sessionStorage for app.

- basically I will be getting data from an outside database and want to store it locally for a time and also updating it.

I think for my purposes it might be best to just store the data temporarily - similar to a session var - and possible dump the data after the app closes - and then reload all when they login each time.

So would it be best to use localStorage or sessionStorage for this purpose?

In my localStorage test the data remained persistent even after I quit and reloaded the app - which is nice but better for me to be able to delete it when I want?

Are there functions that can wipe out just some key value pairs?

Are there functions that can delete all local storage?

Also is localStorage / sessionStorage sandboxed with an IOS or android app or is it available outside the app also?

[PrabhakarKumar]

Hi ,

One of the biggest evolution happening around HTML5 today is the availability of persistent storage on browsers.

Before HTML5, we had no choice other than using cookies to store some kind of data on client side.

With HTML5, you have several choices for storing your data, depending on what you want to store.

The most broadly used technology is called WebStorage, an API for persistent key-value data storage which most major browsers have supported for a while.

WebStorage has persistent storage called LocalStorage, and temporary storage called SessionStorage which will be cleared after a session.

localStorage - use for long term use.

sessionStorage - use when you need to store something that changes or something temporary.

For ref: you can look to this link : Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks

Thanks

Prabhakar Kumar

[revdave]

Thanks - I check out that link!

NEWBIE ALERT....

In the meantime I have an issue:

multi page site tester:

- login goes to outside site to get data using get call

- comes back and sets data results to local storage like:

localStorage.setItem("First", value.First);

localStorage.setItem("Last", value.Last);

etc...

-----------------------

- then goes to another page2 and shows data FROM local storage - all good

like this

<script>

$(document).ready(function(){

document.getElementById('First').innerHTML = localStorage.getItem("First");

document.getElementById('Last').innerHTML = localStorage.getItem("Last");

document.getElementById('Street').innerHTML = localStorage.getItem("Street");

$('#list').html( output );

$('#list').listview( "refresh" );

});

</script>

-----------------

- but then I try to go to another semi duplicate page3 to see close to the same thing - and oddly some of the fields do not show and some do....

I do same as page 2 but example = Street does not show...

--------------------------

I keep checking for errors but don't see anything.....

newbie doesn't know what to look for...

Q: HOW CAN I TRACK THIS DOWN?

[sinious · Accepted solution]

Are you using your developer tools? You can easily see what is being stored in local storage, and under what domain.

In Google for example simply hit Menu->More Tools->Developer Tools (or CTRL+SHIFT+I) and then look in the Resources tab->Local Storage (roll down arrow), find the domain. You can see what exists between pages.

Most typically if the data is not set on the same domain or if you inadvertently delete your local storage, that's when it gets wiped. Be sure you understand how to set it and work with it properly without overwriting it. Are you using a framework by any change? If so, there's probably some tools to handle all of that for you.