Question

我正在创建一个简单的列表，每次用户输入表单中的内容时，它都会被添加到无序列表中。但是一旦重新加载页面，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>");
});
});

Answer 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

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

1 个答案: