Question

嘿，我无法弄清楚为什么我的代码无效。我拔掉了头发，请看一下，告诉我这段代码有什么问题

注意：它在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');
}

Answer 1

如果您在本地计算机上尝试localStorage而未使用WAMP，XAMPP或类似程序等网络服务器。 IE浏览器肯定会抛出错误。因此，请确保您在Web服务器中尝试进行开发。

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

Answer 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和全局变量之外无法访问任何内容）
mumble-jumble of global和local变量（由于HTML中的事件处理程序的定义）
您的代码在小提琴中不起作用，因为您的所有全局函数都已移至init过程

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

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

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

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

Answer 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来获取文本

这可以为你节省一些眼泪

为什么即使用本地存储时抛出错误

3 个答案: