localStorage和jQuery问题

Question

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

我正在尝试使用localStorage，以便当我回到页面时 - 剩余的字符（var text_remaining）不显示完整的2000个字符，并且只应显示剩下的字符...（var text_remaining）??? / p>

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

Answer 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();


});

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

Answer 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');
});

}）;

Answer 4

您必须不断设置并从本地存储中获取该项目，而是从localstorage 而不是 text_remaining变量获取剩余值。

示例：

$(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');
    });
});

希望这有帮助。

Answer 5

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

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