使用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();
  });
}  

演示