javascript - Check if localStorage is available - Stack Overflow

admin管理员组

文章数量:1133738

I know there has been many questions about checking for localStorage but what if someone manually shuts it off in their browser? Here's the code I'm using to check:

localStorage.setItem('mod', 'mod');
if (localStorage.getItem('mod') != null){
  alert ('yes');
  localStorage.removeItem('mod');
} else {
  alert ('no');
}

Simple function and it works. But if I go into my Chrome settings and choose the option "Don't Save Data" (I don't remember exactly what it's called), when I try to run this function I get nothing but Uncaught Error: SecurityError: DOM Exception 18. So is there a way to check if the person has it turned off completely?

UPDATE: This is the second function I tried and I still get no response (alert).

try {
  localStorage.setItem('name', 'Hello World!');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Quota exceeded!');
  }
}

I know there has been many questions about checking for localStorage but what if someone manually shuts it off in their browser? Here's the code I'm using to check:

localStorage.setItem('mod', 'mod');
if (localStorage.getItem('mod') != null){
  alert ('yes');
  localStorage.removeItem('mod');
} else {
  alert ('no');
}

Simple function and it works. But if I go into my Chrome settings and choose the option "Don't Save Data" (I don't remember exactly what it's called), when I try to run this function I get nothing but Uncaught Error: SecurityError: DOM Exception 18. So is there a way to check if the person has it turned off completely?

UPDATE: This is the second function I tried and I still get no response (alert).

try {
  localStorage.setItem('name', 'Hello World!');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Quota exceeded!');
  }
}

• javascript
• error-handling
• local-storage

Share Improve this question Follow edited Nov 13, 2019 at 15:51 Bill Keller 83388 silver badges2222 bronze badges asked May 7, 2013 at 20:07 user2025469user2025469 1,57122 gold badges1414 silver badges2626 bronze badges 4

• still doesn't provide any way to see if it's working or not... – user2025469 Commented May 7, 2013 at 20:21
• 7 Uhhhhmmm. If it throws an exception you know it isn't working – PeeHaa Commented May 7, 2013 at 20:23
• 2 possible duplicate of How to detect if browser supports HTML5 Local Storage – T J Commented Oct 8, 2014 at 17:15
• 2 Possible duplicate of Check for HTML 5 localStorage – BuZZ-dEE Commented Nov 2, 2017 at 13:17

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 183

Use modernizr's approach:

function isLocalStorageAvailable(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

if(isLocalStorageAvailable()){
    // available
}else{
    // unavailable
}

It's not as concise as other methods but that's because it's designed to maximise compatibility.

The original source: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js

Working example: http://jsfiddle.net/6sm54/2/

I'd check that localStorage is defined prior to any action that depends on it:

if (typeof localStorage !== 'undefined') {
    var x = localStorage.getItem('mod');
} else {
    // localStorage not defined
}

UPDATE:

If you need to validate that the feature is there and that it is also not turned off, you have to use a safer approach. To be perfectly safe:

if (typeof localStorage !== 'undefined') {
    try {
        localStorage.setItem('feature_test', 'yes');
        if (localStorage.getItem('feature_test') === 'yes') {
            localStorage.removeItem('feature_test');
            // localStorage is enabled
        } else {
            // localStorage is disabled
        }
    } catch(e) {
        // localStorage is disabled
    }
} else {
    // localStorage is not available
}

Feature-detecting local storage is tricky. You need to actually reach into it. The reason for this is that Safari has chosen to offer a functional localStorage object when in private mode, but with it's quotum set to zero. This means that although all simple feature detects will pass, any calls to localStorage.setItem will throw an exception.

Mozilla's Developer Network entry on the Web Storage API's has a dedicated section on feature detecting local storage. Here is the method recommended on that page:

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return false;
    }
}

And here is how you would use it:

if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}
else {
    // Too bad, no localStorage for us
}

If you are using NPM, you can grab storage-available using

npm install -S storage-available

then use the function like so:

if (require('storage-available')('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}

Disclaimer: Both the documentation section on MDN and the NPM package were authored by me.

MDN updated the storage detect function. In 2018, it's more reliable:

function storageAvailable() {
    try {
        var storage = window['localStorage'],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage && storage.length !== 0;
    }
}

Browsers that support localStorage will have a property on the window object named localStorage. However, for various reasons, just asserting that property exists may throw exceptions. If it does exist, that is still no guarantee that localStorage is actually available, as various browsers offer settings that disable localStorage. So a browser may support localStorage, but not make it available to the scripts on the page. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually available. Our feature detect should take these scenarios into account.

See here for a brief history of feature-detecting localStorage.

With this function you can check if localstorage is available or not, and you keep under control the possible exceptions.

function isLocalStorageAvailable() {

    try {
        var valueToStore = 'test';
        var mykey = 'key';
        localStorage.setItem(mykey, valueToStore);
        var recoveredValue = localStorage.getItem(mykey);
        localStorage.removeItem(mykey);

        return recoveredValue === valueToStore;
    } catch(e) {
        return false;
    }
}

It is better to check availability of localStorage in conjunction with cookies, because if cookie is enabled the browser could detect that localStorage is available and type it as object, but provide no possibility to work with it. You use the next function to detect both localStorage and cookies:

const isLocalStorage = () => {
  try {
    if (typeof localStorage === 'object' && navigator.cookieEnabled) return true
    else return false
  } catch (e) {
    return false
  }
}

You can try this method Anytime validate the content of the localstore

const name = localStorage.getItem('name');
if(name){
    console.log('Exists');
}else
{
    console.log('Not found');
}

I tried this solution in Chrome, Firefox and Edge and it worked correctly.

if (localStorage.getItem('itemName') === null )
{
    // your code here ...
}

if the local variable on localStorage do not exist it will brind false.

You can create a checker function which tries to get a non existing item from the localStorage. When the localStorage is turned on you will normally get null returned. But when the localStorage is turned off an error will be thrown. You don't have to set any item for the checking.

const checkLocalStorage = () => {
    try {
      localStorage.getItem("x");
      return true;
    } catch {
      return false;
    }
}

Modifying Joe's answer to add a getter makes it easier to use. With the below you simply say: if(ls)...

Object.defineProperty(this, "ls", {
  get: function () { 
    var test = 'test';
    try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch(e) {
      return false;
    }
  }
});

Here is an easy check:

if(typeof localStorage === 'undefined'){

Use this to check localStorage is set or not. Its help you to get status of Localstorage.

    if( window.localStorage.fullName !== undefined){

           //action
   }else{
          }

本文标签： javascriptCheck if localStorage is availableStack Overflow