javascript - 使用html5本地存储显示值

我正在尝试获取表单值并使用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();
});

最佳答案

唯一的问题是您的事件处理程序不在$(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();
  });
}

DEMO