HTML5 localStorage usefull函数// JavaScript，TypeScript

问题描述

如何：*

• 检查是否支持 localStorage


• 检查 localStorage 是否有项目


• 获取 localStorage


• 获取 localStorage中的最大空间量


• 获取 localStorage中的已用空间


• 获取 localStorage 的备份


• 将备份应用于 localStorage


• 转储的所有信息控制台中的localStorage

• Check if localStorage is supported
• Check if localStorage has an Item
• Get the amount of space left in localStorage
• Get the maximum amount of space in localStorage
• Get the used space in localStorage
• Get a Backup of localStorage
• Apply a Backup to localStorage
• Dump all information of localStorage in the console

* 检查以下答案

常见问题：

• 如何在 localStorage中存储对象


• 如何在 localStorage中存储数组


• 如何在 localStorage中保存图像


• localStorage 教程（也包括存储事件和要记住的事物）

• [link] How to store Objects in localStorage
• [link] How to store an Array in localStorage
• [link] How to save an Image in localStorage
• [link] localStorage Tutorial (also covers storage events and things to remember)

相关：

• 有关Web存储的一般信息


• sessionStorage 当页面会话结束时，存储的数据将被清除


• 和
  
  实例：on

  
  The complete code as LocalStorage-Module on GitHubGist: JavaScript and TypeScript
  Live example: on JSFiddle

  
  
  检查是否支持localStorage -

  /**
    * Flag set true if the Browser supports localStorage, without affecting it
    */
  var localStorage_isSupported = (function () {
      try {
          var itemBackup = localStorage.getItem("");
          localStorage.removeItem("");
          localStorage.setItem("", itemBackup);
          if (itemBackup === null)
              localStorage.removeItem("");
          else
              localStorage.setItem("", itemBackup);
          return true;
      }
      catch (e) {
          return false;
      }
  })();
  

  
  
  检查localStorage是否有项目 -

  /**
   * Check if localStorage has an Item / exists with the give key
   * @param key the key of the Item
   */
  function localStorage_hasItem(key) {
      return localStorage.getItem(key) !== null;
  }
  

  
  
  获取localStorage剩余的空间 -

  /**
   * This will return the left space in localStorage without affecting it's content
   * Might be slow !!!
   */
  function localStorage_getRemainingSpace() {
      var itemBackup = localStorage.getItem("");
      var increase = true;
      var data = "1";
      var totalData = "";
      var trytotalData = "";
      while (true) {
          try {
              trytotalData = totalData + data;
              localStorage.setItem("", trytotalData);
              totalData = trytotalData;
              if (increase)
                  data += data;
          }
          catch (e) {
              if (data.length < 2) {
                  break;
              }
              increase = false;
              data = data.substr(data.length / 2);
          }
      }
      if (itemBackup === null)
          localStorage.removeItem("");
      else
          localStorage.setItem("", itemBackup);
      return totalData.length;
  }
  

  
  
  获取localStorage中的最大空间量 -

  /**
   * This function returns the maximum size of localStorage without affecting it's content
   * Might be slow !!!
   */
  function localStorage_getMaximumSize() {
      var backup = localStorage_getBackup();
      localStorage.clear()
      var max = localStorage_getSizeLeft();
      localStorage_applyBackup(backup);
      return max;
  }
  

  
  
  获取localStorage中的已用空间 -

  /**
   * This will return the currently used size of localStorage
   */
  function localStorage_getUsedSize() {
      var sum = 0;
      for (var i = 0; i < localStorage.length; ++i) {
          var key = localStorage.key(i)
          var value = localStorage.getItem(key);
          sum += key.length + value.length;
      }
      return sum;
  }
  

  
  
  获取用作我的物品的空间

  /**
   * This will return the currently used size of a given Item,returns NaN if key is not found
   * @param key
   */
  function getItemUsedSpace(key) {
      var value = localStorage.getItem(key);
      if (value === null) {
          return NaN;
      }
      else {
          return key.length + value.length;
      }
  }
  

  
  
  备份Assosiative Array，只有

  
  
  获取localStorage的备份 -

  /**
   * This will return a localStorage-backup (Associative-Array key->value)
   */
  function localStorage_getBackup() {
      var backup = {};
      for (var i = 0; i < localStorage.length; ++i) {
          var key = localStorage.key(i);
          var value = localStorage.getItem(key);
          backup[key] = value;
      }
      return backup;
  }
  

  
  
  将备份应用到localStorage -

  /**
   * This will apply a localStorage-Backup (Associative-Array key->value)
   * @param backup            associative-array
   * @param fClear             optional flag to clear all existing storage first.Default:true
   * @param fOverwriteExisting optional flag to replace existing keys. Default: true
   */
  function localStorage_applyBackup(backup, fClear, fOverwriteExisting) {
      if (fClear === void 0) { fClear = true; }
      if (fOverwriteExisting === void 0) { fOverwriteExisting = true; }
      if (fClear == true) {
          localStorage.clear();
      }
      for (var key in backup) {
          if (fOverwriteExisting === false && backup[key] !== undefined) {
              continue;
          }
          var value = backup[key];
          localStorage.setItem(key, value);
      }
  }
  

  
  
  转储所有信息控制台中的localStorage -

  /**
   * This functions dumps all keys and values of the local Storage to the console,
   * as well as the current size and number of items
   * @param fShowMaximumSize optional, flag show maximum size of localStorage. Default: false
   */
  function localStorage_consoleInfo(fShowMaximumSize) {
      if (fShowMaximumSize === void 0) { fShowMaximumSize = false; }
      var amount = 0;
      var size = 0;
      for (var i = 0; i < localStorage.length; ++i) {
          var key = localStorage.key(i)
          var value = localStorage.getItem(key);
          console.log(amount, key, value);
          size += key.length + value.length;
          amount++;
      }
      console.log("Total entries:", amount);
      console.log("Total size:", size);
      if (fShowMaximumSize === true) {
          var maxSize = localStorage_getMaximumSize();
          console.log("Total size:", maxSize);
      }
  }
  

  
  
  

  ---

  
  
  

  注释

  ---

  Notes

  
  
  • 每个键和值都使用等于其字符串长度的确切空间量
  
  
  • 我测试中允许的最大存储空间：~5MB
    
    
    
    
    • 5000000 Edge
    
    
    • 5242880 Chrome
    
    
    • 5242880 Firefox
    
    
    • 5000000 IE
    
    
    • Each key and value is using the exact amount of space equal to its string length
    • The maximum storage-space allowed in my tests: ~5MB
      • 5000000 Edge
      • 5242880 Chrome
      • 5242880 Firefox
      • 5000000 IE

      //示例 -

      这篇关于HTML5 localStorage usefull函数// JavaScript，TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！