使用html5本地存储显示值

Question

• 我正在尝试获取表单值并使用html5本地存储显示值
• 我已经编写了html和js代码，但无法正常工作
• 你能告诉我如何解决吗。
• 在下面提供我的代码
• 我也放了小提琴

https://jsfiddle.net/r977y9zb/2/

code
$(document).ready(function () {
    function init() {
        if (localStorage["name"]) {
            $('#name').val(localStorage["name"]);
        }
        if (localStorage["email"]) {
            $('#email').val(localStorage["email"]);
        }
        if (localStorage["message"]) {
            $('#message').val(localStorage["message"]);
        }
    }
    init();
});

$('.stored').keyup(function () {
    localStorage[$(this).attr('name')] = $(this).val();
});

$('#localStorageTest').submit(function() {
    localStorage.clear();
});

Answer 1

localStorage使用.getItem()和.setItem()方法来访问和设置存储的数据。 您将使用括号（ [ ， ] ）将名称直接传递给localStorage ，就好像它是一个数组一样，不是。

顺便说一句，不需要将代码包装在init函数中，因为只要页面准备好了，您只想运行一次该函数即可。

尝试这个：

$(document).ready(function () {

        if (localStorage.getItem("name")) {
            $('#name').val(localStorage.getItem("name"));
        } 
        if (localStorage.getItem("email")) {
            $('#email').val(localStorage.getItem("email"));
        }
        if (localStorage.getItem("message")) {
            $('#message').val(localStorage.getItem("message"));
        }

  $('.stored').keyup(function () {
      localStorage.setItem($(this).attr('name')) = $(this).val();
  });

  $('#localStorageTest').submit(function() {
      localStorage.clear();
  });

});

Answer 2

唯一的问题是您的事件处理程序不在$(document).ready否则代码可以正常工作：

$(document).ready(function() {
  init();
});


function init() {
  if (localStorage["name"]) {
    $('#name').val(localStorage["name"]);
  }
  if (localStorage["email"]) {
    $('#email').val(localStorage["email"]);
  }
  if (localStorage["message"]) {
    $('#message').val(localStorage["message"]);
  }

  $('.stored').keyup(function() {
    localStorage[$(this).attr('name')] = $(this).val();
  });

  $('#localStorageTest').submit(function() {
    localStorage.clear();
  });
}  

演示