我的JavaScript和TypeScript中用于localStorage
的函数套件
isSupported
:检查浏览器是否支持本地存储。
hasItem(key)
:检查是否存在与指定键匹配的项目。
getSpaceLeft()
:获取剩余可用空间。
getMaximumSace()
:获取本地存储的最大容量。
getUsedSpace()
:获取已使用的本地存储空间。
getItemUsedSpace()
:为指定键的项目获取已使用的存储空间。
getBackup()
:获取当前本地存储的备份。
applyBackup(backup, fClear, fOverwriteExisting)
:将给定备份应用到本地存储。
consoleInfo(fShowMaximumSize)
:在控制台中显示关于本地存储的信息。
GitHubGist上作为LocalStorage
模块的完整代码:JavaScript 和 TypeScript
Live example: 在JSFiddle上查看示例
检查是否支持localStorage - TypeScript-Version
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版本
function localStorage_hasItem(key) {
return localStorage.getItem(key) !== null;
}
获取localStorage中剩余空间的大小 -
TypeScript版本
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
function localStorage_getMaximumSize() {
var backup = localStorage_getBackup();
localStorage.clear()
var max = localStorage_getRemainingSpace();
localStorage_applyBackup(backup);
return max;
}
获取localStorage中已使用的空间 - TypeScript-Version
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;
}
获取 TypeScript-Version 使用的空间
function getItemUsedSpace(key) {
var value = localStorage.getItem(key);
if (value === null) {
return NaN;
}
else {
return key.length + value.length;
}
}
备份关联数组,仅TypeScript-Version。
获取localStorage的备份 - TypeScript版本
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版本
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版本
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);
}
}
注释
- 每个键和值都使用与其字符串长度相等的确切空间量
- 我的测试中允许的最大存储空间:约5MB
- 5000000 Edge
- 5242880 Chrome
- 5242880 Firefox
- 5000000 IE
- Firefox问题:不要使用
for (var key in localStorage)
,而是使用:for (var i = 0; i < localStorage.length; ++i) { var key = localStorage.key(i)
。 for..in
循环会将localStorage
成员函数作为key
。
// Example - http://jsfiddle.net/1rqtd7pg/1/
console.log("LocalStorage supported:", LocalStorage.isSupported)
if(LocalStorage.isSupported) {
localStorage.setItem("asd", "ASDASD")
localStorage.setItem("asd" + Math.random(), "ASDASD")
var backup = LocalStorage.getBackup()
console.log(JSON.stringify(backup))
var usedSpace = LocalStorage.getUsedSpace()
console.log("Used Space:", usedSpace)
var maxSpace = LocalStorage.getMaximumSpace()
console.log("Maximum Space:", maxSpace)
var remSpace = LocalStorage.getRemainingSpace()
console.log("Remaining Space:", remSpace)
console.log("SpaceCheck", maxSpace === usedSpace + remSpace)
console.log("hasItem", LocalStorage.hasItem("nothis0ne"))
localStorage.clear()
console.log("has asd", LocalStorage.hasItem("asd"))
LocalStorage.applyBackup(backup)
LocalStorage.consoleInfo()
}