Is HTML5 Web Storage cleared when the browser clears its cache? If it does, many people like me may lose data if they accidentally clear cache? or like in this comment ...
Since HTML5 local storage is kept separate from js cookies (like Silverlight, Gears, Flash), it opens up a world of 3rd party privacy issues for HTML5 as these objects will likely NOT get deleted with a clear cache or delete temporary data
... where web storage is not cleared, but leads to privacy issues?
To quote the Mozilla Developer Center:
DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)
Note that Flash cookies, OTOH, are quite a bit harder to remove.
Related
Making localStorage and/or IndexedDB data offline permanent?
Is it possible to make localStorage and/or IndexedDB offline data permanent?
I am planning to make a completely offline HTML5 app and want the data to never get deleted, unless and otherwise the user knowingly does so.
I do not want the data to be deleted even after the app is closed, system is shutdown.
...want the data to never get deleted, unless and otherwise the user
knowingly does so.
The Storage API allow requesting a "persistent" permission for your origin. If granted, the semantics are that the data stored in certain APIs (local storage, Indexed DB, Cache, etc) is preserved until an explicit user action (like clearing storage), which appears to match your needs.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/API/StorageManager/persist
Note that this is a new web platform API. It was recently added to Firefox (57) and Chrome (55), but is not present in Edge or Safari. Also note that Chrome does not currently show prompts for this permission request; it uses heuristics about the web app to determine if the request should be granted or not rather than asking the user to make the decision.
The specification is at: https://storage.spec.whatwg.org
The spec gives a background on how storage could work in browsers, i.e. by default an origin's data is "best effort", meaning preserved until the browser needs to clear it (due to space constraints, etc). The actual behavior of browsers varies significantly.
Is HTML5 Application Cache different from browser cache?? If so, in what aspects, it is different and how this mechanism works?? And tell me how using AppCache we can improve browsing performance.. Also discuss about the pros and cons of HTML5 AppCache (its expiry and storage size limit etc.,)??
HTML5 Cache
HTML5 provides application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster Reduced server load - the
browser will only download updated/changed resources from the server
Browser cache
Internet browsers use caching to store HTML web pages by storing a copy of visited pages and then using that copy to render when you re-visit that page. If the date on the page is the same date as the previously stored copy, then the computer uses the one on your hard drive rather than re-downloading it from the internet.
References -
http://www.w3schools.com/html/html5_app_cache.asp
http://www.pctools.com/security-news/what-is-a-browser-cache/
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site's performance, though you are of course using bandwidth to download those files initially.
AppCache has been deprecated.
See Google's note on it and Mozilla's. Google recommends using the service worker Cache API (which Mozilla classifies as an "experimental technology"). Note: compatibility with Safari is limited.
Difference
AppCache is specifically designed to allow web apps (and web sites) to be made available offline, though the same speed benefits which the normal browser cache provides, when the user is online, are also provided by AppCache.
The key difference with the Browser cache is that you can specify all the assets the browser should cache in a manifest file (conceivably your entire site) whereas the browser cache will only store the pages (and associated assets) you have actually visited.
How long can I expect data to be kept in localStorage. How long will an average user's localStorage data persist? If the user doesn't clear it, will it last till a browser re-install?
Is this consistent across browsers?
localStorage is also known as Web Storage, HTML5 Storage, and DOM Storage (these all mean the same thing).
localStorage.setItem('bob', varMyData);
sessionStorage.setItem('bob', varMyData);
localStorage is similar to sessionStorage, except that data stored in localStorage has no expiration time, while data stored in sessionStorage gets cleared when the browsing session ends (i.e. when the browser / browser tab is closed). (See Limitations section below for up-to-date storage size limitations.)
Session storage is used much less often than localStorage, and exists only within the current browser tab - even two tabs loaded with the same website will have different sessionStorage data. sessionStorage data survives page refresh, but not closing/opening the tab. LocalStorage data, on the other hand, is shared between all tabs and windows from the same origin. LocalStorage data does not expire; it remains after the browser is restarted and even after OS reboot.
localStorage is available on all browsers, but persistence is not consistently implemented. In particular, localStorage can be cleared by user action and may be cleared inadvertently (who would think that clearing all cookies also clears localStorage?).
In Firefox, localStorage is cleared when these three conditions are met: (a) user clears recent history, (b) cookies are selected to be cleared, (c) time range is "Everything" -- or when LocalStorage is full - see "Limitations" section below.
In Chrome, localStorage is cleared when these conditions are met: (a) clear browsing data, (b) "cookies and other site data" is selected, (c) timeframe is "from beginning of time" -- or when LocalStorage is full (see "Limitations" section below). In Chrome, it is also now possible to delete localStorage for one specific site.
In IE, to clear localStorage: (a) Tools--Internet Options, (b) General tab, (c) delete browsing history on exit, (d) ensure "Cookies and website data" (or "temporary internet files and website files") is selected, (e) consider unchecking "Preserve Favorites website data" at the top
In Safari: (a) Click Safari (b) Preferences (c) Select the Privacy tab (d) Click Remove all website data (e) Click Remove Now
Opera: Despite excellent articles on localStorage from the Opera site, I haven't yet found clear (non-programmatic) instructions to users on how to clear localStorage. If anyone finds, please leave a comment below this answer with reference link.
Limitations:
TOTAL localStorage is limited to 50% of free disk space.
ALSO, the localStorage for any one "origin" (domain + any subdomains) is (theoretically) limited to 20% of total localStorage - in practice, though, the localStorage for one domain (as of Oct/2022) is:
minimum: 10Mb
maximum: 2Gb Source
actual: 5Mb (limit on my system with 6Gb free space, per a modified version of this script )
(Test System: i7 / 32Gb / 500Gb SSD w 6Gb free / Brave browser:
Version 1.45.133 Chromium: 107.0.5304.141 (Official Build) (64-bit)
When the TOTAL localStorage is full, then the browser will start clearing out data (called "origin eviction") based on an LRU policy — the Least Recently Used domain will be deleted first, then the next one, until the browser is no longer over the limit.
Note that this origin eviction process will delete an entire domain's worth of data until the storage amount goes under the limit again. Deletion of a domain's localStorage data is "all-or-nothing" -- there is no trimming effect put in place to delete parts of origins (domains) because partial data could be much worse than no data.
The Opera dev site has an excellent summary of localStorage:
The current way of storing data on the client-side — cookies — is a
problem:
Low size: Cookies generally have a maximum size of around 4 KB, which
is not much good for storing any kind of complex data
It’s difficult for cookies to keep track of two or more transactions on the same
site, which might be happening in two or more different tabs
Cookies
can be exploited using techniques such as cross site scripting,
resulting in security breaches
Other (less popular) alternatives to
cookies include techniques involving query strings, hidden form
fields, flash based local shared objects, etc. Each with their own set
of problems related to security, ease of use, size restrictions etc.
So up until now we have been using pretty bad ways of storing data on
the user’s end. We need a better way, which is where Web Storage comes
in.
Web Storage
The W3C Web Storage specification was designed as a better way of
storing data on the client-side. It has two different types of
storage: Session Storage and Local Storage.
Both Session and Local Storage will typically be able to store around
5 MB of data per domain, which is significantly more than cookies. NOTE THAT although MDN's numbers were updated (Oct 2022) and now say: minimum: 10Mb / Maximum: 2Gb, this author is unable to exceed 5Mb per domain/origin. M.D.N. / test script
Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
MDN - Browser_storage_limits_and_eviction_criteria
https://javascript.info/localstorage
https://dev.opera.com/articles/web-storage/
http://www.quirksmode.org/html5/storage.html
http://www.ghacks.net/2015/02/05/how-to-clear-web-storage-in-your-browser-of-choice/
https://nakedsecurity.sophos.com/2014/11/05/how-to-clear-out-cookies-flash-cookies-and-local-storage/
http://www.opera.com/dragonfly/documentation/storage/
DOMStorage article on MDN (written by John Resig)
http://ejohn.org/blog/dom-storage/
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/
Duration
Unlimited. The data persists through browser & OS restarts.
Capacity
Each domain can store minimum of 5MB of data in LocalStorage.
For some browsers you can store up to 1GB of data.
In Chrome while performing 'clear browsing data' , if you choose 'Cookies and other site and plugin data' option then sessionStorage data will be erased.
The content in localstorage is persistent as long as the user chooses to clear the storage (entirely or a single value inside it)
About the consistency across browser, localstorage is currently available on every major browser, including IE8+ (see http://caniuse.com/#feat=namevalue-storage)
What is new in HTML 5’s “offline web applications” feature which was not already available in all browsers?
Offline caching is the job of the browser — how did it become a job of HTML?
A web cache is a mechanism for the
temporary storage (caching) of web
documents, such as HTML pages and
images, to reduce bandwidth usage,
server load, and perceived lag. A web
cache stores copies of documents
passing through it; subsequent
requests may be satisfied from the
cache if certain conditions are met.
As written in Wikipedia’s article for Web cache.
And this is written for offline web cache in the W3C website:
In order to enable users to continue
interacting with Web applications and
documents even when their network
connection is unavailable — for
instance, because they are traveling
outside of their ISP's coverage area —
authors can provide a manifest which
lists the files that are needed for
the Web application to work offline
and which causes the user's browser to
keep a copy of the files for use
offline.
What is HTML 5 doing better and different in caching?
Is it similar to offline mode in Internet Explorer 5? And can we cache the data beyond the limit of amount of space set in browser?
Please give me an example so that I can understand the difference of HTML 5 offline cache, and browser caches.
Web browser caching is when browsers decide to store files locally to improve performance. HTTP allows web servers to suggest browsers how long to store the files for, and allows browsers to ask the server whether a file has changed (so that they can avoid re-downloading it).
However, it’s not designed to reliably store assets required by an offline application. It’s ultimately up to the browser whether, and for how long, it caches the files. And browsers will often stop using their cached version if they can’t contact the server to check that it’s up-to-date.
The HTML5 offline web applications spec provides web authors with the ability to tell browsers what to store for offline access, and requires browsers to keep those files up-to-date when it is online. It also provides a DOM property that tells the developer whether the browser is online or offline, and events that fire when the online status changes.
As Peeter describes in his answer, this allows web app developers to store user-inputted data whilst the user is offline, then sync it with the server when they’re online again. The developer has to do this storage and syncing manually, as the browser only provides the events indicating online status, but if the browser also supports localStorage, the developer can store the data there.
I can do no better than point you to the relevant chapter of Dive into HTML5: http://diveintohtml5.ep.io/offline.html
You can now cache dynamic data, instead of just js/css/html files / images.
Lets say you've got a todo list application open in your browser. You're connected to the internet and you're adding a bunch of stuff you have to do.
Boom, you're on an airplane without a connection. You've got 6 hours of time to kill so you decide to get some work done. You finish all of the things on your todo list (the list was still open in your browser). You select all of the items and change their state to "finished".
Your plane lands, you open up your laptop and refresh the page. All the changes you did without a connection are now synced to the server as you have a internet connection now.
With many browsers adding proper local storage support (and with this whole HTML5 buzz), there is a lot of talk about offline web apps competing with desktop software. But, as a matter of fact - one quick "clear private data" on your browser (which a lot of people do) - clears all the local storage data.
I'm now thinking that local storage in browsers can at best be used to cache data temporarily before being sync-ed with the web server, but truly offline web applications can't rely on HTML5's local storage permanently due to the problem I outlined above.
Is there a scope for offline web applications that actually depend on data extensively?
My take on this is that the offline capability of online web apps can compete with desktop software, but not pure offline web-apps.
Why? Well, the major drawback of online web apps was what happens when you lose your network connection when doing any work. Seeing as this can be resolved now, the competition is truly on. Imagine editing a document online, then move around without internet, come back online and then sync the changes and continue to work as if nothing happened. That is truly awesome.
For this to work, the browser should allow to store data in a location that you can pick which would mean access to OS layer, which will probably not happen anytime soon...