Html5 Local Storage Fallback Solutions

HTML5 Local Storage fallback solutions

I use PersistJS (github repository), which handles client-side storage seamlessly and transparently to your code. You use a single API and get support for the following backends:

• flash: Flash 8 persistent storage.
• gears: Google Gears-based persistent storage.
• localstorage: HTML5 draft storage.
• whatwg_db: HTML5 draft database storage.
• globalstorage: HTML5 draft storage (old spec).
• ie: Internet Explorer userdata behaviors.
• cookie: Cookie-based persistent storage.

Any of those can be disabled—if, for example, you don't want to use cookies. With this library, you'll get native client-side storage support in IE 5.5+, Firefox 2.0+, Safari 3.1+, and Chrome; and plugin-assisted support if the browser has Flash or Gears. If you enable cookies, it will work in everything (but will be limited to 4 kB).

HTML5 localstorage fallback

For such questions always take a look at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills which lists polyfills for almost every new feature.

Which contains a list for LocalStorage as well https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage

In particular, this one seems active: https://github.com/marcuswestin/store.js

localStorage fallback attempt on file:// protocol

Your localStorage var declared inside if is hoisted to the top of the function and it shadowed the global localStorage variable.

One solution to this may be setting local localStorage to global value at the top:

$(document).ready(function(){
    var localStorage = window.localStorage;
    if(supportLocalStorage() !== true){
        alert("boo"); 
        localStorage = {
            getItem: function (key) {
                if(window.name == null || window.name == "")
                    return "{}"; //Later i'm about to use JSON Parser.
                return window.name;
            },
            setItem: function (key, val) {
                window.name = val;
            }
        }

    }

    var products_list = localStorage.getItem("products");
}

html5 localStorage error with Safari: QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.

Apparently this is by design. When Safari (OS X or iOS) is in private browsing mode, it appears as though localStorage is available, but trying to call setItem throws an exception.

store.js line 73
"QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."

What happens is that the window object still exposes localStorage in the global namespace, but when you call setItem, this exception is thrown. Any calls to removeItem are ignored.

I believe the simplest fix (although I haven't tested this cross browser yet) would be to alter the function isLocalStorageNameSupported() to test that you can also set some value.

https://github.com/marcuswestin/store.js/issues/42

function isLocalStorageNameSupported() 
{
    var testKey = 'test', storage = window.sessionStorage;
    try 
    {
        storage.setItem(testKey, '1');
        storage.removeItem(testKey);
        return localStorageName in win && win[localStorageName];
    } 
    catch (error) 
    {
        return false;
    }
}

Can I use local storage for a mobile HTML5 webapp as a fallback when user loses internet access?

Certainly. One of the purposes with localStorage is to enable offline applications.

you can check (see here for details):

window.navigator.onLine

to see if you are online or offline, or simply:

window.addEventListener("offline", offlineFunc, false)
window.addEventListener("online", onlineFunc, false)

and if offline you serve the stored content from localStorage by updating the page partially.

Another way of doing this is to use a cache manifest.

Here you can define which files shall be available if browser become offline, and which require network and so forth.

See here for details on that:

https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

http://diveintohtml5.info/offline.html

Besides from localStorage you can also use IndexedDB which also allow you to store Blobs (or files) (File API is coming, currently only for Chrome).

Are there any drawbacks to using localStorage instead of Cookies?

Usability

The user will not know if you are using localStorage or a cookie. If a user disable cookies, localStorage will not work either.

Performance

There is no noticeable speed difference between the two methods.

sessionStorage

sessionStorage is only for that browser tab's session. If you close the tab, the session will be lost and the data will be lost too, it's similar to a session variable on any backend language.

localStorage

localStorage will be available for any tab or window in the browser, and will exist until it is deleted by the user or the program. Unlike a cookie, you cannot setup expiration. localStorage has a much larger storage limit as well.

Your Questions

1. You are not using this data server side, so you don't need a cookie. localStorage is never sent to the server unlike a cookie.
2. If the user disables the cookies, localStorage will not work either.

Fallback Example

You can use a Modernizr to verify if localStorage is available and if not, use store a cookie instead.

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

You can also forego Modernizr and use the check typeof Storage !== 'undefined'.

jQuery fallback when localStorage/sessionStorage is disabled

Checkout this link to find whether you have local storage enabled or not.

https://mathiasbynens.be/notes/localstorage-pattern

Also, for the fallback you can use cookies always. Or even if the cookies is not enabled, the only way to support is by URL param. Usually, in these cases people will show a warning message staing their Localstorage/Cookie should be enabled in order to work with their site. Hope it helps .

Alternatively, you can store in window.name which will be carried over on one browser tab; if you open the same page on anther tab it wont be available.

---

Related Topics