HTML5 localStorage usefull函数// JavaScript，TypeScript [英] HTML5 localStorage usefull Functions // 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

* 检查以下答案

常见问题：

• [link] 如何在 localStorage中存储对象


• [link] 如何在 localStorage中存储数组


• [link] 如何在 localStorage中保存图像


• [link] 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)

相关：

• [link] 有关Web存储的一般信息


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


• [link] indexedDB 用于结构化数据客户端存储的低级API

• [link] General Information about Web Storage
• [link] sessionStorage data stored gets cleared when the page session ends
• [link] indexedDB a low-level API for client-side storage of structured data

推荐答案

我的<$ c的功能套件JavaScript和TypeScript中的$ c> localStorage

• isSupported


• hasItem（key）


• getSpaceLeft（）


• getMaximumSace（）


• getUsedSpace（）


• getItemUsedSpace（）


• getBackup（）


• applyBackup（backup，fClear，fOverwriteExisting）


• consoleInfo（fShowMaximumSize）



My suite of functions for localStorage in JavaScript and TypeScript

• isSupported
• hasItem(key)
• getSpaceLeft()
• getMaximumSace()
• getUsedSpace()
• getItemUsedSpace()
• getBackup()
• applyBackup(backup, fClear, fOverwriteExisting)
• consoleInfo(fShowMaximumSize)



GitHubGist上的完整代码 LocalStorage -Module： JavaScript 和 TypeScript

实例：on JSFiddle


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



检查是否支持localStorage - TypeScript-Version

/**
  * 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是否有项目 - TypeScript-Version

/**
 * 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中的最大空间量 - TypeScript-Version

/**
 * 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中的已用空间 - TypeScript-Version

/**
 * 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的备份 - TypeScript-Version

/**
 * 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 - TypeScript-Version

/**
 * 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 - TypeScript-Version

/**
 * 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

    //示例 - http://jsfiddle.net/1rqtd7pg/1/

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