Cách phát hiện xem trình duyệt có hỗ trợ Bộ nhớ cục bộ HTML5 hay không

Các cảnh báo mã sau ls existtrong IE7:

if(window.localStorage) {
    alert('ls exists');
} else {
    alert('ls does not exist');
}

IE7 không thực sự hỗ trợ lưu trữ cục bộ nhưng điều này vẫn cảnh báo nó. Có lẽ điều này là do tôi đang sử dụng IE9 trong trình duyệt IE7 và các chế độ tài liệu bằng công cụ dành cho nhà phát triển IE9. Hoặc có thể đây chỉ là cách sai để kiểm tra xem LS có được hỗ trợ hay không. Đúng cách là gì?

Ngoài ra, tôi không muốn sử dụng Modernizr vì tôi chỉ sử dụng một vài tính năng HTML5 và việc tải một tập lệnh lớn không đáng chỉ để phát hiện hỗ trợ cho một số thứ đó.

Bạn không cần phải sử dụng modernizr, nhưng bạn có thể sử dụng phương pháp của họ để phát hiện xem localStoragecó được hỗ trợ hay không

Modernnizr tại thử nghiệm github
cholocalStorage

// 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;
    }
});

được cập nhật với mã nguồn hiện tại

if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

Chức năng này hoạt động tốt:

function supports_html5_storage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

Nguồn: www.diveintohtml5.info

Ngoài ra, tôi không muốn sử dụng Modernizr vì tôi chỉ sử dụng một vài tính năng HTML5 và việc tải một tập lệnh lớn không đáng chỉ để phát hiện hỗ trợ cho một số thứ đó.

Để giảm kích thước tệp Modernizr, hãy tùy chỉnh tệp tại http://modernizr.com/download/ để phù hợp với nhu cầu của bạn. Phiên bản chỉ dành cho lưu trữ cục bộ của Modernizr có dung lượng 1,55KB.

Hãy thử window.localStorage!==undefined:

if(window.localStorage!==undefined){
    //Do something
}else{
    alert('Your browser is outdated!');
}

Bạn cũng có thể sử dụng typeof window.localStorage!=="undefined", nhưng câu lệnh trên đã làm được

Tôi không thấy nó trong câu trả lời, nhưng tôi nghĩ thật tốt khi biết rằng bạn có thể dễ dàng sử dụng vanilla JS hoặc jQuery cho các bài kiểm tra đơn giản như vậy và trong khi Modernizr giúp ích rất nhiều, vẫn có những giải pháp sạch mà không cần đến nó.

Nếu bạn sử dụng jQuery , bạn có thể làm:

var _supportsLocalStorage = !!window.localStorage
    && $.isFunction(localStorage.getItem)
    && $.isFunction(localStorage.setItem)
    && $.isFunction(localStorage.removeItem);

Hoặc, với JavaScript Vanilla thuần túy :

var _supportsLocalStorage = !!window.localStorage
    && typeof localStorage.getItem === 'function'
    && typeof localStorage.setItem === 'function'
    && typeof localStorage.removeItem === 'function';

Sau đó, bạn chỉ cần thực hiện IF để kiểm tra hỗ trợ:

if (_supportsLocalStorage) {
    console.log('ls is supported');
    alert('ls is supported');
}

Vì vậy, toàn bộ ý tưởng là bất cứ khi nào bạn cần các tính năng JavaScript, trước tiên bạn sẽ kiểm tra đối tượng mẹ và sau đó là các phương thức mà mã của bạn sử dụng.

Hãy thử bắt sẽ thực hiện công việc:

    try{
       localStorage.setItem("name",name.value);
       localStorage.setItem("post",post.value);
       }
    catch(e){
       alert(e.message);    
       }

Thử:

if(typeof window.localStorage != 'undefined') {
}

if (window.localStorage){

   alert('localStorage is supported');
   window.localStorage.setItem("whatever", "string value");

}

Việc sửa đổi câu trả lời của Andrea để thêm getter giúp dễ sử dụng hơn. Với những điều dưới đây, bạn chỉ cần nói:if(ls)...

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

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

function script(){
  if(ls){
    alert('Yes');
  } else {
    alert('No');
  }
}

<button onclick="script()">Local Storage Support?</button>

Tôi biết mình đến bữa tiệc hơi muộn, nhưng tôi có một vài chức năng hữu ích mà tôi đã nấu và ném vào một tệp có tên 'management_storage.js ". Tôi hy vọng chúng hữu ích cho các bạn, vì chúng đã phục vụ tốt cho tôi.

Hãy nhớ: Chức năng bạn đang tìm (trả lời câu hỏi này) là isLclStorageAllowed.

Vì vậy, không cần quảng cáo thêm đây là mã của tôi:

/* Conditional Function checks a web browser for 'session storage' support. [BEGIN] */

if (typeof isSessStorageAllowed !== 'function')
    {
        function isSessStorageAllowed()
            {
                if (!!window.sessionStorage && typeof sessionStorage.getItem === 'function' && typeof sessionStorage.setItem === 'function' && typeof sessionStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ss_test_itm_key = 'ss_test_itm_' + String(cur_tm);
                                var ss_test_val = 'ss_test_val_' + String(cur_tm);

                                sessionStorage.setItem(ss_test_itm_key, String(ss_test_val));

                                if (sessionStorage.getItem(ss_test_itm_key) == String(ss_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                sessionStorage.removeItem(ss_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'session storage' support. [END] */

/* Conditional Function checks a web browser for 'local storage' support. [BEGIN] */

if (typeof isLclStorageAllowed !== 'function')
    {
        function isLclStorageAllowed()
            {
                if (!!window.localStorage && typeof localStorage.getItem === 'function' && typeof localStorage.setItem === 'function' && typeof localStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ls_test_itm_key = 'ls_test_itm_' + String(cur_tm);
                                var ls_test_val = 'ls_test_val_' + String(cur_tm);

                                localStorage.setItem(ls_test_itm_key, String(ls_test_val));

                                if (localStorage.getItem(ls_test_itm_key) == String(ls_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                localStorage.removeItem(ls_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'local storage' support. [END] */

/* Conditional Function checks a web browser for 'web storage' support. [BEGIN] */

/* Prerequisites: 'isSessStorageAllowed()', 'isLclStorageAllowed()' */

if (typeof isWebStorageAllowed !== 'function')
    {
        function isWebStorageAllowed()
            {
                if (isSessStorageAllowed() === true && isLclStorageAllowed() === true)
                    {
                        return true;
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'web storage' support. [END] */