How to detect if browser supports HTML5 Local Storage

Asked
Active3 hr before
Viewed126 times

8 Answers

detectbrowser
90%

You don't have to use modernizr, but you can use their method to detect if localStorage is supported,modernizr at github test for localStorage, I realize 1.55kb is nothing, but it still seems like overkill just to check localStorage support. – Tyler Biscoe Feb 8 '17 at 16:44 , Possible duplicate of Check for HTML 5 localStorage – BuZZ-dEE Nov 2 '17 at 13:17

// In FF4, if disabled, window.localStorage should === null.

// Normally, we could not test that directly and need to do a
//   `('localStorage' in window) && ` test first because otherwise Firefox will
//   throw bugzil.la/365772 if cookies are disabled

// Also in iOS5 & Safari Private Browsing mode, attempting to use localStorage.setItem
// will throw the exception:
//   QUOTA_EXCEEDED_ERRROR DOM Exception 22.
// Peculiarly, getItem and removeItem calls do not throw.

// Because we are forced to try/catch this, we'll go aggressive.

// Just FWIW: IE8 Compat mode supports these features completely:
//   www.quirksmode.org/dom/html5.html
// But IE8 doesn't support either with local files

Modernizr.addTest('localstorage', function() {
   var mod = 'modernizr';
   try {
      localStorage.setItem(mod, mod);
      localStorage.removeItem(mod);
      return true;
   } catch (e) {
      return false;
   }
});
load more v
88%

The following code alerts ls exist in IE7:,IE7 doesn't really support local storage but this still alerts it does. Perhaps this is because I am using IE9 in IE7 browser and document modes using the IE9 developer tool. Or maybe this is just the wrong way to test if LS is supported. What is the right way?,You can also use typeof window.localStorage!=="undefined", but the statement above already does it,Also I don't want to use Modernizr since I am using only a few HTML5 features and loading a large script isn't worth it just to detect support for those few things.

The following code alerts ls exist in IE7:

if (window.localStorage) {
   alert('ls exists');
} else {
   alert('ls does not exist');
}
load more v
72%

Before using local storage, how to Check browser support for localStorage and sessionStorage?,Check browser support for localStorage and sessionStorage,Tool CSS Gradients CSS Flexbox Text Overflow Webkit Filter Border Radius Box Shadow Text Shadow Outline Border RGBA Multiple Columns box-sizing resize Transitions 2D Transform 3D Transform Linear Gradients Radial Gradients

JavaScript

if (typeof(Storage) !== "undefined") {
   // Code for localStorage/sessionStorage.
   document.write("Congratulation! Your browser support Web Storage.");
} else {
   document.write("Sorry! Your browser no't support Web Storage.");
}
65%

What is the difference between sessionStorage and localStorage?,localStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage, you can check using the following snippet:,localStorage browser support,Where is localStorage stored?

It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.

window.localStorage.setItem('name', 'Obaseki Nosa');
load more v
75%

The following code alerts ls exist in IE7:,IE7 doesn't really support local storage but this still alerts it does. Perhaps this is because I am using IE9 in IE7 browser and document modes using the IE9 developer tool. Or maybe this is just the wrong way to test if LS is supported. What is the right way?,You don't have to use modernizr, but you can use their method to detect if localStorage is supported,Also I don't want to use Modernizr since I am using only a few HTML5 features and loading a large script isn't worth it just to detect support for those few things.

The following code alerts ls exist in IE7:

if (window.localStorage) {
   alert('ls exists');
} else {
   alert('ls does not exist');
}
load more v
40%

Before using web storage, check browser support for localStorage and sessionStorage:,With web storage, web applications can store data locally within the user's browser.,Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.,The numbers in the table specify the first browser version that fully supports Web Storage.

load more v
22%

↶ check for HTML5 video support ,↶ check for HTML5 local storage ,Instead of writing this function yourself, you can use Modernizr to detect support for HTML5 video. ,Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for HTML5 local storage.

Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version. To use it, include the following <script> element at the top of your page.

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <title>Dive Into HTML5</title>
   <script src="modernizr.min.js"></script>
</head>

<body>
   ...
</body>

</html>
load more v
60%

If you want to quickly find out if the browser you're currently using supports HTML5 local storage, press F12 and enter this into your browser console:,When downloading huge files, you may encounter an error called Out of HTML5 Offline Storage Space. If this happens, delete the cookies and the session data using the Settings in your browser, restart your device and try again.,The JavaScript localStorage object stores data which doesn't expire. It will be available even if you end the session by closing your browser and stay till you delete it manually.,TL;DR – HTML5 local storage is an alternative to cookies, allowing web applications to store user information in their browser.

if (typeof(Storage) !== "undefined") {
   console.log("Local storage is supported.");
   // Local storage is available on your browser
} else {
   console.log("Local storage is not supported.");
   // The condition isn't met, meaning local storage isn't supported
}
load more v

Other "detect-browser" queries related to "How to detect if browser supports HTML5 Local Storage"