自定义 localStorage js 函数未在 Chrome 中运行答案

【问题标题】：Custom localStorage js function not running in Chrome自定义 localStorage js 函数未在 Chrome 中运行
【发布时间】：2012-10-06 22:44:16
【问题描述】：

我想要做什么：

在 localStorage 之上创建我自己的存储 API，以便在我自己的代码中使用它。

为什么？

所以它有一个供我使用的 API，以后可以扩展。

系统：

Chrome 版本：版本 22.0.1229.94 m

JSFiddle：http://jsfiddle.net/ttback/kr88W/

错误

fiddle 会在 Console 中触发错误：

TypeError: 对象 # 的属性 'localStorageSave' 不是函数

这适用于 IE 8 和 Firefox 16.0.1，所以我想知道是我遗漏了什么还是 Chrome 错误。

代码：

<html>
<head>
<title>JS function not working in Chrome</title>
<script type="text/javascript">
var localStorage = localStorage || {};
localStorage.localStorageSave = function(){
    alert("SAVE");
};
localStorage.localStorageSave();
</script>
</head>
<body>

    
</body>

</html>

【问题讨论】：

你想做什么？扩展 localStorage ?
小提琴很棒，但也请在问题中包含您的代码，以便问题可以独立存在。
localStorage 不是保留字吗？
将 localStorage 重命名为 localStorage2 使其工作正常，除非这不是您想要做的......
Storage 对象（如localStorage）具有特殊的行为，即存储在其中的任何成员变量都会转换为字符串并永久保存。这样，您的匿名函数将被转换为字符串并永久存储。

标签： javascript google-chrome local-storage

【解决方案1】：

您不应扩展 window.localStorage。更好的方法是：

var myNameSpace = {};

myNameSpace.localStorage = {

    save: function (name, object) {

        //save to localStorage
        window.localStorage.setItem(name, window.JSON.stringify(object));

    }

}

myNameSpace.localStorage.save('testObject', {test: true});

【讨论】：

【解决方案2】：

试试这个：

localStorage.__proto__.localStorageSave = function(){
    alert("SAVE");
};

FIDDLE

【讨论】：

显然很难让我确定哪个答案是最好的。你的回答也有效。我选择了dystroy的那个，因为他解释了为什么会发生这种情况，据我所知，这很难理解。无论如何感谢您的帮助。
是的，我也会选择dystroy的ans，他解释得很好:)

【解决方案3】：

当你这样做时

localStorage.localStorageSave = function(){
    alert("SAVE");
};

你做的和

一样

localStorage["localStorageSave"] = function(){
    alert("SAVE");
};

或

localStorage.setItem("localStorageSave", (function(){
    alert("SAVE");
}).toString());

您实际上并没有在 localStorage 中保存函数，因为 localStorage 只保存字符串。

你可以检查一下

console.log(typeof(localStorage.localStorageSave));

你会得到"string"。这不是函数，是正常的。

【讨论】：

很棒的解释。我想知道为什么分配的函数存储为字符串。为什么它在其他浏览器上也能正常工作？
也许其他对象只允许使用[] 为存储设置一个值？
非常感谢您解释原因。我想使用保留字是这个问题的根源。不过，为什么代码可以在其他浏览器上运行仍然是个谜。
setItem 和大括号符号已记录在案。我猜其他浏览器制造商没有考虑 localStorage 的点符号。
点符号和localStorage 的括号一样有效。以下是实际发生的情况：var localStorage 创建了一个新的undefined 局部变量，该变量被提升到范围的顶部。因此，当您执行var localStorage = localStorage || {} 时，localStorage 被设置为新对象，因为localStorage 的本地值未定义。因此，它可以在那些浏览器中运行，因为您实际上并没有将函数存储在真正的localStorage 中——您将它存储在一个新的局部变量中。这在 Chrome 中失败，因为它不允许覆盖 localStorage。