How Persistent Is Localstorage

How persistent is localStorage?

Mozilla implements it like cookies:

DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)

https://developer.mozilla.org/en/DOM/Storage

In DOM Storage it is not possible to specify an expiration period for any of your data. All expiration rules are left up to the user. In the case of Mozilla, most of those rules are inherited from the Cookie-related expiration rules. Because of this you can probably expect most of your DOM Storage data to last at least for a meaningful amount of time.

http://ejohn.org/blog/dom-storage/

Chrome implements it like cache:

LocalStorage is Not Secure Storage

HTML5 local storage saves data unencrypted in string form in the regular browser cache.

Persistence

On disk until deleted by user (delete cache) or by the app

https://developers.google.com/web-toolkit/doc/latest/DevGuideHtml5Storage

---

As for a "replacement for the Cookie", not entirely

Cookies and local storage really serve difference purposes. Cookies are primarily for reading server-side, LocalStorage can only be read client-side. So the question is, in your app, who needs this data — the client or the server?

localStorage data persistence

LocalStorage is not permanent. The storage belongs to the user so the user can clear it if they want to. Other web apps cannot mess with it, but the user is free to clear it or modify it if they want - it's their data, much like files that belong to a locally installed application are under the control of the computer user.

In addition, LocalStorage can be recycled when space is low.

You should think of LocalStorage as a long term cache that usually will remain with that particular browser on that particular computer, but will not always be there. Any truly persistent state must be stored on your own server.

Heck, if the user just decides to switch to another browser (much less a new computer), all Local Storage will appear to be empty in the new browser.

Exactly how persistent is localStorage?

Yes. localStorage is persistent until user clears/disables it.

When is localStorage cleared?

W3C draft says this

User agents should expire data from the local storage areas only for security reasons or when requested to do so by the user. User agents should always avoid deleting data while a script that could access that data is running.

So if browsers follow the spec it should persist untill the user removes it on all browsers, I have not found any that have deleted on any off my projects.

A good article to read is also http://ejohn.org/blog/dom-storage/

How can I persist local storage data from one page to another?

Below are some choices for handling persistent storage, however, your problem in your code is your setting storage based on a computed property. The moment the component is unmounted, the computed property will revert to a default, in your case 0. You can see this in action if you change your default score from 0 to 1, and refresh your app, you will notice localstorage reverts to a 1 after a test.

EDIT: Adding commented answer for additional information.

You can move it to a button click maybe on save or submit, or even add some logic to the computed if you truly want to keep it computed.

if(this.healthScore != 0) {
localStorag.setItem(this.healthScore)
}

Your Retrieval needs to get from localStorage and assign back to the local variable

getHealthScore() {
  this.healthScore = localStorage.getItem('SavedHealthScore')
},

That way it will only set local storage if the test score is not 0.

You need to call the set storage from a different event, and not from the computed property. Or you need to add logic to prevent the computed from always saving to local storage

(You are already aware but I will tell you anyway in case its helpful)

Persistent storage choices:

1) you use the browser localStorage and store information there which will persist until the user clears out their browser, however, in your case you may want to consider sessionStorage since it will clear when they leave your app. There ais not a need to install any NPM packages for these as they are already available. code snippet below in case you want to create one method, if you want to use Session instead just change localStorage to sessionStorage and viola.

**
 * Adds an item to Storage
 * @param key The Key value
 * @param value The String Value to be Stored
 */
export function AddToStorage(key: string, value: string): any {
    localStorage.setItem(key, value);
}

2) Another slightly more complex choice but one you will see used in mid to large level project is Vuex which is Vue's ways of handling state when transitioning through the app. The set-up for it is a little complex and is overkill for your project that is already almost done, but if you want to dip your toes into it, this would be a good opportunity.

Persistent storage in browser

1. if its a website then, there is no means of persistent storage on browser. localstorage, database, cookies, everything is erased if user don't require them. So the only option would be to store the data on the server.

   OR

2. if it is a mobile app (phonegap), then you can use SQL Lite.

why is javascript localStorage not persistant and removes values

localStorage is also known as Web Storage, HTML5 Storage, and DOM Storage.

localStorage is similar to sessionStorage, except that data stored in localStorage has no expiration time, but sessionStorage gets cleared when the browsing session ends (i.e. when the browser is closed).

localStorage is available on all browsers, but persistence is not consistently implemented. Furthermore localStorage can be cleared by user action.

In Firefox, localStorage is cleared when these three conditions are met:

1. user clears recent history,

2. cookies are selected to be cleared

3. time range is "Everything"

In Chrome, localStorage is cleared when these conditions are met:

1. clear browsing data,

2. "cookies and other site data" is selected,

3. timeframe is "from beginning of time".

In IE, to clear localStorage:

1. Tools-->Internet Options,

2. General tab,

3. delete browsing history on exit

In Safari:

1. Click Safari

2. Preferences

3. Select the Privacy tab

4. Click Remove all website data

How to store persistent data client side

You may store data in window.name, which can hold up to 2MB of data (!).

/* on page 1 */
window.name = "Bla bla bla";

/* on page 2 */
alert(window.name); // alerts "Bla bla bla"

Edit: Also have a look at this Ajaxian article regarding this.

Note that other sites in the same tab/window does also have access to window.name, so you shouldn't store anything confidential here.

---

Related Topics