为什么在使用本地存储时抛出错误答案

【问题标题】：why ie thrown error while using local storage为什么在使用本地存储时抛出错误
【发布时间】：2017-01-06 10:03:54
【问题描述】：

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

注意：它在 chrome 和 mozilla 中运行良好，但在 IE10 和所有以下版本的 IE 中无法运行

请注意，我正在尝试两种不同的方式，所以请不要混淆这是小提琴链接http://jsfiddle.net/rEmn6/

这是我的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>

这里是javascript代码

var editable = document.getElementById('editable');

var store = window["localStorage"], storage = window.localStorage;


if (navigator.appVersion.indexOf("MSIE 7.") != 1){
    console.log(navigator);
    var msg = document.getElementById('message');
    function setVal(ths) {
        console.log(ths.value);
        storage.setItem('sms', ths.value);
    };
    if(storage.getItem('sms')){
        msg.value = storage.getItem('sms');
    }
}

function SaveValue(ths){
    var val = ths.innerHTML;
    if (val != ''){
        store.setItem('contenteditable', val)
        console.log(val);
    }
}
function clearData(){
    console.log('clear hoga');
    store.clear();
}

if (store.getItem('contenteditable')) {
  editable.innerHTML = store.getItem('contenteditable');
}

【问题讨论】：

你可以发布抛出的错误，而不是拔出你的头发。
您是通过网络服务器还是通过file://（来自本地文件系统）运行您的页面？
@wumm SCRIPT5007：无法获取未定义或空引用的属性“getItem”
@TheMechanic 我相信 IE 在从文件系统运行时不能与 localStorage 一起正常工作。我已经用你的代码创建了页面并通过网络服务器运行它，它工作正常
我建议使用WAMP 或XAMPP（或类似工具）进行开发。当你从本地文件系统运行你的页面时，你不能保证一切都像在网络服务器上一样工作。这就是为什么我从不从本地系统运行我的页面

标签： javascript internet-explorer local-storage web-storage

【解决方案1】：

如果您在本地计算机上尝试localStorage，并且没有使用WAMP、XAMPP 或类似程序等网络服务器。 IE浏览器肯定会报错。因此，请确保您出于开发目的在 Web 服务器中尝试使用它。

当你从本地文件系统运行你的页面时，浏览器不会像他在网络服务器上那样运行。

【讨论】：

【解决方案2】：

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

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

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

用于保存/恢复 2 个元素的代码完全重复，代码位于两个不同的位置，而问题基本相同
混淆名称（'ths' 令人眼花缭乱。第一次检查您的代码时，我自动将其识别为 'this' 的拼写错误）
定义事件处理程序并向其传递参数的错误方式（在 HTML 代码中定义事件处理程序会导致各种问题，因为除了 this 和全局变量之外您无法访问任何内容）
全局和局部变量的混乱（由于 HTML 中事件处理程序的定义）
您的代码无法正常工作，因为您的所有全局函数都已移至 init 过程中

重写它（至少对我而言）比尝试重新构建一个功能版本然后尝试了解它出了什么问题要少得多。

我放弃了检测任何 IE7 版本的尝试。它妨碍了，因为无论如何你的问题都是针对 IE10。作为旁注，使用此类功能的网站应该完全放弃 IE7 兼容性，恕我直言。

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

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

【讨论】：

您的代码很好，非常感谢。但我想告诉你一件事，我用两种方法写的，以检查哪一种是完美的。这就是为什么我写了这种顺便说一句非常感谢给我灵感:-)
另一个问题是我没有使用 wamp 或类似的东西，我在本地机器上尝试过。这就是代码抛出错误的原因
嗯，对我来说，它在 IE11 上本地工作，但也许 IE10 上的本地存储坏了？
+1 让功能变得更简单更容易，老兄
我的荣幸:)。请注意，如果您不需要支持 IE8，可以使用elem.onkeyup = save.bind (elem, prop)。它应该适用于 IE9+。

【解决方案3】：

在 Internet Explorer 11 中，我收到错误消息 SaveValue is undefined 出现在这里：

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

您应该使用不显眼的 Javascript 技术，并将 onKeyUp 事件处理放在您的脚本中，而不是放在 div 中。

var editable = document.getElementById('editable');
editable.onkeyup = SaveValue;

在您的 SaveValue 函数中，您现在可以使用 this.innerHTML 来获取文本

这应该可以让你省点眼泪

【讨论】：