0

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

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

3 回答 3

3

If you are trying localStorage on a local machine and without use of a web server like WAMP, XAMPP or similar programs. IE browser will definitely throws an error. So make sure that you are trying it in a web server for development purposes.

When you run your page from local filesystem, the browser will not act like he does for web server.

于 2014-01-27T04:19:48.520 回答
1

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

<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 中事件处理程序的定义）
  • your code did not work in the fiddle since all your global functions were moved into the init procedure

It was much less work (at least for me) to rewrite it than to try to rebuild a functional version and then try to understand what went wrong with it.

I dumped the attempt at detecting whatever IE7 version. It was getting in the way, since your problem was targeting IE10 anyway. As a side note, a site using this kind of features should simply drop IE7- compatibility altogether, IMHO.

I tested this code on IE8/XP, FF, Opera, Chrome, IE11 and safari/XP.

All tests were run from a web server except IE11. It is well possible IE10- have problems with local storage when run localy.

于 2014-01-25T13:34:28.817 回答
0

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

这应该可以为您节省一些眼泪

于 2014-01-25T12:58:03.390 回答