localStorage 和 jQuery 问题答案

【问题标题】：localStorage and jQuery IssuelocalStorage 和 jQuery 问题
【发布时间】：2016-07-06 16:00:32
【问题描述】：

以下脚本显示表单元素 (textarea) 中剩余的字符（允许的）。我想使用本地存储来保留在 textarea 中输入的文本，直到我提交表单。

我正在尝试使用 localStorage，以便当我回到页面时 - 剩余的字符 (var text_remaining) 不会显示完整的 2000 个字符，而应该只显示剩余的字符...(var text_remaining) ???

<script>

$(document).ready(function() {
var char_th = 2000;
    var text_max = 2000;

    $('#textarea_feedback').html(char_th + ' characters remaining');
    //$('#textarea_feedback').html(text_max + ' characters remaining');

    $('#comments').keyup(function() {
            var text_length = $('#comments').val().length;
            var text_remaining = text_max - text_length;



            $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

</script>

这就是我最终使用的已解决 - 工作

 <script>

$(document).ready(function() {
    var text_max = 2000;

$('#comments').keyup(function() {
        var text_length = $('#comments').val().length;

        var text_remaining = text_max - text_length;
        localStorage.setItem("text", $('#comments').val());

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
});


 $('#textarea_feedback').html(text_max + ' characters remaining');
 var text = localStorage.getItem("text");

 $('#comments').val(text);
 $('#comments').keyup();

});

</script>

【问题讨论】：

你贴的代码好像根本没有使用localStorage。
应该说我“不想使用”localStorage
这是一个 jsFiddle - jsfiddle.net/timur/47a7A - 尝试使用 localStorage

标签： javascript jquery html local-storage

【解决方案1】：

试试这个：

$(document).ready(function() {
  var char_th = 2000;
  var text_max = 2000;
  $('#comments').keyup(function() {
    var text_length = $('#comments').val().length;

    var text_remaining = text_max - text_length;
    localStorage.setItem("text", $('#comments').val());

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
  $('#textarea_feedback').html(char_th + ' characters remaining');
  var text = localStorage.getItem("text");

  $('#comments').val(text);
  $('#comments').keyup();


});

【讨论】：

我删除了 var char_th - 不要认为我需要它 - 谢谢

【解决方案2】：

给你！

<script>

$(document).ready(function() {
    var char_th = 2000;
    var text_max = 2000;

    $('#textarea_feedback').html(char_th + ' characters remaining');
    localStorage.setItem("charrem", char_th");

    $('#comments').keyup(function() {
            var text_length = $('#comments').val().length;
            //var text_remaining = text_max - text_length;
            var text_remaining = localStorage.getItem("charrem");


            $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

</script>

【讨论】：

这不起作用 - 仍然显示 2000，文本区域中已有文本
感谢@The Dark Knight

【解决方案3】：

你会想把它清理一下，但我认为你所追求的是这样的：

$(document).ready(function() {
var text_max = 99;
var remaining = (localStorage.getItem('remaining') > 0) ? localStorage.getItem('remaining') : text_max;
localStorage.setItem('remaining', remaining);
$('#textarea').val(localStorage.getItem('txtText'));
$('#textarea_feedback').html(remaining + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;
    localStorage.setItem('remaining', text_remaining);
    localStorage.setItem('txtText', $('#textarea').val());
    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});

});

【讨论】：

【解决方案4】：

您将不得不不断地从本地存储中设置和获取项目，而是从localstorage not text_remaining variable 中获取剩余值。

示例：

$(document).ready(function() {
var char_th = 2000;
    var text_max = 2000;


//First check local storage for any data
    var remaining = localStorage.getItem('remainder');

    if(remaining == null || remaining == undifined){

        //use 2000 if nothing has been typed 
    $('#textarea_feedback').html(char_th + ' characters remaining');

}else{

//use localstorage if value exists

$('#textarea_feedback').html(remaining + ' characters remaining');

}





    $('#comments').keyup(function() {
            var text_length = $('#comments').val().length;
            var text_remaining = text_max - text_length;

            //Here we add two lines to continuously put/pull from local storage

            var setremaining = localStorage.setItem('remainder' text_remaining);

            var remaining = localStorage.getItem('remainder');

            $('#textarea_feedback').html(remaining + ' characters remaining');
    });
});

希望这会有所帮助。

【讨论】：

【解决方案5】：

我创建了一个jsfiddle，其中文本保存在本地存储中，text_max 设置为文本区域的最大长度。（有点适应能力）

(function () {
    var text_max = $('textarea').attr('maxlength');

    if (!localStorage['text']) { localStorage['text'] = ""; }

    $('textarea').val(localStorage['text']);

    var char_th = text_max - localStorage['text'].length;

    $('p').html(char_th + ' characters remaining');

    $('textarea').keyup(function (event) {
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        $('p').html(text_remaining + ' characters remaining');
        localStorage['text'] = this.value;
    });
})();

<textarea cols="30" rows="10" maxlength="2000"></textarea>

<p></p>

【讨论】：