Check for HTML 5 localStorage

Question

How to check for HTML 5 localStorage compability of the users browser?

I have been using two checks:

    if (window.localStorage) {
       // localStorage works!
    }

and

    if (typeof(localStorage) != 'undefined') {
         // localStorage works!
    }

Also, I have seen a function online which uses an try/catch block to check whether localStorage can add a key/data pair, or throws an error.

Which of those three methods would you recommend, and are there any differences between the first and the second?

Possible duplicate of [How to detect if browser supports HTML5 Local Storage](https://stackoverflow.com/questions/11214404/how-to-detect-if-browser-supports-html5-local-storage) — idmean, Nov 02 '17 at 18:35

Sirko · Answer 1 · 2021-01-06T11:15:59.207

3

The following is the code Modernizr (code) uses for localstorage

tests['localstorage'] = function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
};

IMO this is pretty much the recommended way to check for it.

edited Jan 06 '21 at 11:15

answered Mar 02 '12 at 15:13

Sirko

72,589
19
149
183

not the code used by Modernzir. Where does mod variable come from? – Alessandro Lendaro Jan 06 '21 at 10:53
@AlessandroLendaro In essence it's still the same code Modernizr uses (I added the link to the respective code in the answer). As for `mod` actually it doesnt matter what value it has. – Sirko Jan 06 '21 at 11:17
of course it doesn't matter but it should be declared for clarity, even if javascript allows undeclared variables – Alessandro Lendaro Jan 07 '21 at 08:05

score 2 · Accepted Answer · answered Mar 02 '12 at 15:20

2

@MathiasBynens has written a nice article about this, comparing different approaches:

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

answered Mar 02 '12 at 15:20

user123444555621

148,182
27
114
126

3

Please insert a solution in your answer, not just a link. – BuZZ-dEE Nov 02 '17 at 12:41

score 0 · Answer 3 · answered Mar 02 '12 at 15:24

0

Both are equivalent here. First is shorter and therefore more convenient. This method is used, for example, in MDN code for adding localStorage imitation that uses cookies.

answered Mar 02 '12 at 15:24

Marat Tanalin

13,927
1
36
52

Check for HTML 5 localStorage

3 Answers3

Linked