判断浏览器是否支持localStorage

  1. function isLocalStorageUsable(){
  2.         const localStorageTestKey = '_localStorage_support_test';
  3.     const localStorageTestValue = 'test';
  4.     let isSupport = false;
  5.     try{
  6.         localStorage.setItem(localStorageTestKey,localStorageTestValue)
  7.         if(localStorage.getItem(localStorageTestKey) === localStorageTestValue){
  8.             isSupport = true;
  9.         }
  10.         localStorage.removeItem(localStorageTestKey);
  11.         return isSupport;
  12.     }catch(e){
  13.         if(e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED'){
  14.             console.log('localStorage 存储已达上限！')
  15.         }else{
  16.             console.warn('当前浏览器不支持 localStorage！')
  17.         }
  18.     }
  19.     return isSupport
  20.     }

避免多次调用该函数

  1. ready(){
  2.         if(isSupport === null){
  3.         isSupport = isLocalStorageUsable()
  4.     }
  5.     if(isSupport) {
  6.         return Promise.resolve()
  7.     }
  8.     return Promise.reject()
  9.     }

处理key为对象的情况

如果可以的值是对象，那么会隐式的调用 toString() 方法。这会导致key的值都变成 [object Object]，容易造成key重复
避免key是对象而覆盖其他值

  1. function normalizeKey(key){
  2.             if(typeof key !== 'string'){
  3.         console.warn(`${key} used as a key, but it is not a string`);
  4.         key = String(key);
  5.     }
  6.     return key
  7. }

将value进行序列化

  1. function serialize(value, callback) {
  2.     try{
  3.         const valueString = JSON.stringify(value);
  4.         callback( null, valueString);
  5.     }catch(e) {
  6.         console.log(e);
  7.     }
  8.     }

整体调用

  1. setItem(key, value){
  2.         key = normalizeKey(key);
  3.         return ready().then(()=>{
  4.             if (value === undefined) {
  5.                 value = null;
  6.             }
  7.             serialize(value, (error, valueString)=>{
  8.                 if (error) {
  9.                     return Promise.rehect(error);
  10.                 }
  11.                 try{
  12.                     localStorage.setItem(key, valueString);
  13.                     return Promise.resolve();
  14.                 } catch(e) {
  15.                     return Promise.reject(e)
  16.                 }
  17.             })
  18.         })
  19.     }

组件封装

  1. let isSupport = null
  3. function isLocalStorageUsable(){
  4.     const localStorageTestKey = '_localStorage_support_test';
  5.     const localStorageTestValue = 'test';
  6.     let isSupport = false;
  7.     try{
  8.         localStorage.setItem(localStorageTestKey,localStorageTestValue)
  9.         if(localStorage.getItem(localStorageTestKey) === localStorageTestValue){
  10.             isSupport = true;
  11.         }
  12.         localStorage.removeItem(localStorageTestKey);
  13.         return isSupport;
  14.     }catch(e){
  15.         if(e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED'){
  16.             console.log('localStorage 存储已达上限！')
  17.         }else{
  18.             console.warn('当前浏览器不支持 localStorage！')
  19.         }
  20.     }
  21.     return isSupport
  22. }
  24. function serialize(value, callback) {
  25.     try{
  26.         const valueString = JSON.stringify(value);
  27.         callback( null, valueString);
  28.     }catch(e) {
  29.         console.log(e);
  30.     }
  31. }
  33. function normalizeKey(key){
  34.     if(typeof key !== 'string'){
  35.         console.warn(`${key} used as a key, but it is not a string`);
  36.         key = String(key);
  37.     }
  38.     return key
  39. }
  41. function ready(){
  42.     if(isSupport === null){
  43.         isSupport = isLocalStorageUsable()
  44.     }
  45.     if(isSupport) {
  46.         return Promise.resolve()
  47.     }
  48.     return Promise.reject()
  49. }
  51. function setItem(key, value){
  52.     key = normalizeKey(key);
  53.         return ready().then(()=>{
  54.             if (value === undefined) {
  55.                 value = null;
  56.             }
  57.             serialize(value, (error, valueString)=>{
  58.                 if (error) {
  59.                     return Promise.rehect(error);
  60.                 }
  61.                 try{
  62.                     localStorage.setItem(key, valueString);
  63.                     return Promise.resolve();
  64.                 } catch(e) {
  65.                     return Promise.reject(e)
  66.                 }
  67.             })
  68.         })
  69. }
  70. export default setItem