如何使用webstorage?

时间:2016-05-01 17:39:40

标签: javascript

我想使用webstorage来保存并获得一些价值。 这是我的代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Note app</title>
<link rel="stylesheet" href="CSS/jquery.mobile-1.4.5.css">
<script src="JS/jquery.js"></script>
<script src="JS/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript">
function saveNote() {
    localStorage.setItem("note", jQuery("#note").val());


function retrieveNote() {
    jQuery('#note').val(localStorage.getItem("note"));

}
</script>
</head>
<body>
<div data-role="page"id="Home">
<div data-role="header">
<h1>Note app</h1>
</div>
<div role="main" class="ui-content">
<textarea type="text" id="note" class="input-inline"></textarea>
<a href="#" data-role="button" onclick="saveNote()" style="width:120px;margin:auto">Save note</a>
<a href="#" data-role="button" onclick="retrieveNote()" style="width:150px;margin:auto">Retrieve note</a>
</div>
<div data-role="footer">
<h1>test</h1>
</div>
</div>
</body>
</html>

当我点击检索/保存按钮时,事情就是没有任何进展。我该怎么做才能使这个按钮工作? 我正在http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_start

进行测试

2 个答案:

答案 0 :(得分:1)

你很亲密,但有几个错误。首先你需要关闭你的第一个功能。

请参阅下面的工作代码。

<script>
 function saveNote() {
    localStorage.setItem("note", jQuery("#note").val());
}

function retrieveNote() {
    jQuery('#noteRetrieve').text(localStorage.getItem("note"));
}
</script>
<div data-role="page" id="Home">
  <div data-role="header">
    <h1>Note app</h1>
  </div>
  <div role="main" class="ui-content">
    <textarea type="text" id="note" class="input-inline"></textarea>
    <div id="noteRetrieve"></div>
    <a href="#" data-role="button" onclick="saveNote()" style="width:120px;margin:auto">Save note</a>
    <a href="#" data-role="button" onclick="retrieveNote()" style="width:150px;margin:auto">Retrieve note</a>
  </div>
  <div data-role="footer">
    <h1>test</h1>
  </div>
</div>

答案 1 :(得分:0)

您的功能应该关闭。 它应该有适当的开始{和正确的结束}。

除此之外,它应该工作正常。 您可以阅读有关webstorage here的更多信息。