重新加载后如何保存对列表的更改答案

【问题标题】：How to save changes to a list after reloading重新加载后如何保存对列表的更改
【发布时间】：2015-12-26 10:56:53
【问题描述】：

我正在制作一个简单的列表，每次用户输入时都会在表单中写入一些内容，它会被添加到无序列表中。但是，一旦重新加载页面， li 就会消失。我已经阅读了一些关于本地存储的内容来解决这个问题，但我不知道如何使用它，或者即使这是正确的解决方案。我不知道它是否会有所帮助，但这是我的代码。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>   
<script src="http://use.edgefonts.net/lato:n9,i4,n1,i7,i9,n7,i1,i3,n4,n3:all.js"></script>
</head>
<body>
<form>
<input type = 'text' name = 'to do' value = 'Write Here' class= 'input'>

</input>
</form>
<button type='button' class= "d">Enter</button>
<ul></ul>
</body>
</html>

body{
background-color: #eae4dd
}

form {
position: relative;
width: 20em;
height: auto
}

.input {
width: 20em;
margin: auto;
position: absolute;
font-size: 1.5em
}

button {
position: relative;
cursor: pointer;
left: 24em;
top: .05em;
font-size: 1.3em;
background-color: #ceecfc;
border-color: #bff0f2;
color: #0a1417
}

ul {
list-style-type: none;
}

li {

margin-top: .2em;
font-size: 2em;
margin-left: -1.3em;
padding-left: .5em;
background-color: rgb(95, 147, 170);
font-family: lato;
color: #baecf2;
border-radius: .5em
}

$(document).ready(function(){
$("button").click(function(){
    var input = $('input').val();
    $("ul").append("<li>" + input + "</li>");
});
});

【问题讨论】：

见developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

标签： javascript jquery html css local-storage

【解决方案1】：

是的，您可以很容易地为此使用localStorage！让你的 javascript 看起来像这样

//This will set the list HTML if it exists in localstorage
if (localStorage.listHTML) {
  $("ul").html(localStorage.listHTML);
}

$("button").click(function() {
  var input = $('input').val();
  $("ul").append("<li>" + input + "</li>");
  //This will update the value that is in localStorage when you add a new item
  localStorage.listHTML = $("ul").html();
});

您甚至可以添加一个按钮来在点击时重置localStorage。

$("#reset").click(function() {
  $("ul").html("");
  localStorage.listHTML = "";
});

Full example on JSFiddle

More info on localStorage

【讨论】：