Javascript 为什么ie在使用本地存储时抛出错误

嘿，我不明白为什么我的代码不起作用。我已经拔了头发请看一下并告诉我这个代码有什么问题

注意：它在chrome和mozilla中运行良好，但在IE10及以下版本的IE中不起作用

请注意，我尝试了两种不同的方式，所以请不要混淆 这是小提琴链接

这是我的html代码

<div id="wrapper">
    <div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>
    <button onclick="clearData()" id="reset">Reset</button>
    <br>

    <textarea id="message" onKeyUp="setVal(this)"></textarea>
</div>

---

在Internet Explorer 11中，我收到以下错误消息

SaveValue未定义

：

<div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>

在SaveValue函数中，现在可以使用

this.innerHTML

获取文本

---

这将为您节省一些眼泪

在Internet Explorer 11中，我收到错误消息

SaveValue未定义

出现在此处：

<div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>

在SaveValue函数中，现在可以使用

this.innerHTML

获取文本

---

这应该可以帮你省点眼泪

我想这就是你想要实现的目标：

<div id="wrapper">
    <div id="editable" contenteditable="true"></div>
    <button onclick="localStorage.clear()">Reset</button>
    <br>
    <textarea id="message"></textarea>
</div>
<script>
function init()
{
    function setup (name, prop)
    {
        function save (prop)
        {
            localStorage.setItem (this.id, this[prop]);
        }

        var elem = document.getElementById(name);

        // retrieve value
        elem[prop] = localStorage.getItem (name) || '';

        // setup save handler
        //elem.onkeyup = save.bind (elem, prop);
        elem.onkeyup = function (e,p) {          // IE8+ compat.
                           return function () {
                               save.call (e, p); 
                           };
                       }(elem, prop);
    }

    setup ('editable', 'innerHTML');
    setup ('message' , 'value');
}

window.onload = init;
</script>

重置


函数init（）
{
功能设置（名称、道具）
{
功能保存（道具）
{
localStorage.setItem（this.id，this[prop]）；
}
var elem=document.getElementById（名称）；
//检索值
elem[prop]=localStorage.getItem（名称）| |“”；
//设置保存处理程序
//elem.onkeyup=save.bind（elem，prop）；
elem.onkeyup=函数（e，p）{//IE8+compat。
返回函数（）{
save.call（e，p）；
};
}（要素，道具）；
}
设置（“可编辑”、“内部HTML”）；
设置（“消息”、“值”）；
}
window.onload=init；

您的代码在很多方面都有缺陷，我认为从头开始重写更容易：

• 完全复制代码以保存/恢复2个元素，代码位于两个不同的位置，而问题基本相同
• 令人困惑的名称（‘ths’是个麻烦。我第一次检查你的代码时，自动将其识别为“this”的拼写错误）
• 定义事件处理程序并向其传递参数的错误方式（在HTML代码中定义事件处理程序会导致各种问题，因为您只能访问

  this

  和全局变量）
• 混乱的全局变量和局部变量（由于HTML中事件处理程序的定义）
• 由于您的所有全局函数都被移动到init过程中，因此您的代码无法正常工作

重写它（至少对我来说）比试图重建一个功能版本，然后试图理解它出了什么问题要少得多

我放弃了检测IE7版本的尝试。这是一个障碍，因为你的问题是针对IE10。顺便说一句，使用这种功能的网站应该完全放弃IE7兼容性，IMHO

我在IE8/XP、FF、Opera、Chrome、IE11和safari/XP上测试了这段代码

---

除IE11外，所有测试均从web服务器运行。IE10很可能在本地运行时出现本地存储问题。

我怀疑这就是您想要实现的目标：

<div id="wrapper">
    <div id="editable" contenteditable="true"></div>
    <button onclick="localStorage.clear()">Reset</button>
    <br>
    <textarea id="message"></textarea>
</div>
<script>
function init()
{
    function setup (name, prop)
    {
        function save (prop)
        {
            localStorage.setItem (this.id, this[prop]);
        }

        var elem = document.getElementById(name);

        // retrieve value
        elem[prop] = localStorage.getItem (name) || '';

        // setup save handler
        //elem.onkeyup = save.bind (elem, prop);
        elem.onkeyup = function (e,p) {          // IE8+ compat.
                           return function () {
                               save.call (e, p); 
                           };
                       }(elem, prop);
    }

    setup ('editable', 'innerHTML');
    setup ('message' , 'value');
}

window.onload = init;
</script>

重置


函数init（）
{
功能设置（名称、道具）
{
功能保存（道具）
{
localStorage.setItem（this.id，this[prop]）；
}
var elem=document.getElementById（名称）；
//检索值
elem[prop]=localStorage.getItem（名称）| |“”；
//设置保存处理程序
//elem.onkeyup=save.bind（elem，prop）；
elem.onkeyup=函数（e，p）{//IE8+compat。
返回函数（）{
save.call（e，p）；
};
}（要素，道具）；
}
设置（“可编辑”、“内部HTML”）；
设置（“消息”、“值”）；
}
window.onload=init；

您的代码在很多方面都有缺陷，我认为从头开始重写更容易：

• 完全复制代码以保存/恢复2个元素，代码位于两个不同的位置，而问题基本相同
• 令人困惑的名称（‘ths’是个麻烦。我第一次检查你的代码时，自动将其识别为“this”的拼写错误）
• 定义事件处理程序并向其传递参数的错误方式（在HTML代码中定义事件处理程序会导致各种问题，因为您只能访问

  this

  和全局变量）
• 混乱的全局变量和局部变量（由于HTML中事件处理程序的定义）
• 由于您的所有全局函数都被移动到init过程中，因此您的代码无法正常工作

重写它（至少对我来说）比试图重建一个功能版本，然后试图理解它出了什么问题要少得多

我放弃了检测IE7版本的尝试。这是一个障碍，因为你的问题是针对IE10。顺便说一句，使用这种功能的网站应该完全放弃IE7兼容性，IMHO

我在IE8/XP、FF、Opera、Chrome、IE11和safari/XP上测试了这段代码

---

除IE11外，所有测试均从web服务器运行。IE10很可能在本地运行时出现本地存储问题。

如果您尝试在本地计算机上使用

localStorage

，而不使用web服务器，如

WAMP

、

XAMPP

或类似程序。IE浏览器肯定会抛出错误。因此，为了开发目的，请确保您正在web服务器中尝试它

---

当您从本地文件系统运行页面时，浏览器不会像对web服务器那样运行。

如果您在本地计算机上尝试

localStorage

，而不使用web服务器，如

WAMP

，

XAMPP