When Is Localstorage Cleared

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/

Clearing localStorage in javascript?

Use this to clear localStorage:

localStorage.clear();

Will the Localstorage clear the entire localstrorage in production app

1. localStorage.clear() removes everything stored in it, and same goes for sessionStorage, but it's per domain/page, not per browser. This means if 3rd parts script in the same page/domain store stuff in it, you are removing their stuff too.
2. users can always clear their whole browser cache and affect your local storage data, unless your application runs with its own WebView (phonegap, cordova, native apps). If this is a regular Web App, users can always read content, or even modify it, through devtools.

The TL;DR is that localStorage is not a good storage solution, it's not secure, and it's ultimately not reliable.

Strawberry on top, it's synchronous, hence blocking, and limited in size.

I suggest IndexedDB instead, and yet malicious code could interfere with its data too, and users can read it, so I'd never store passwords in there.

Does localStorage.clear() will clear items stored by other sites also?

The LocalStorage is based on the domain. So when you have the local storage cleared, it will be cleared for that domain. If you are using file:/// protocol (opening files) then everything is cleared.

From the spec:

The localStorage object provides a Storage object for an origin.

User agents must have a set of local storage areas, one for each origin.

An origin is a single domain. This means, www.example.com has it's own and example.com has it's own.

Related: In HTML5, is the localStorage object isolated per page/domain?

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?

Why is localStorage getting cleared whenever I refresh the page?

When you reload the app/component both effects will run, and React state updates are processed asynchronously, so it's picking up the empty array state persisted to localStorage before the state update is processed. Just read from localStorage directly when setting the initial todoList state value.

Example:

const LOCAL_STORAGE_KEY = "task-list"

function TodoList() {
  const [todoList, setTodoList] = useState(
    JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  );
    
  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
  }, [todoList]);

  ...

How to delete a localStorage item when the browser window/tab is closed?

should be done like that and not with delete operator:

localStorage.removeItem(key);

---

Related Topics