Question

我需要有关localstorage相关问题的帮助。

方案我正在开发一个引用的Web应用程序，它需要一个书签系统来保存用户更喜欢的引号。为了解决这个问题，我开发了一个jquery内容，它通过“onclick”函数动态生成div（见下文）：

function crearLink1() {
  jQuery('<div class="item"><a>Elemento creado dinámicamente 1</a><button class="eliminar"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}

function crearLink2() {
  jQuery('<div class="item"><a>Elemento creado dinámicamente 2</a><button class="eliminar"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}

function crearLink3() {
  jQuery('<div class="item"><a>Elemento creado dinámicamente 3</a><button class="eliminar"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}

function crearLink4() {
  jQuery('<div class="item"><a>Elemento creado dinámicamente 4</a><button class="eliminar"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}



$(document).on('click', '.eliminar', function() {
  $(this).parent().remove();
});

#bookmarks {
  width: 100%;
  height: auto;
  background: rgba(236, 233, 233, 1.00);
  margin-bottom: 30px;
}
.item {
  height: 30px;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  font-size: 16px;
  margin-bottom: 20px;
  background: rgba(229, 226, 140, 1.00);
}
.eliminar {
  width: 28px;
  height: 28px;
  background: rgba(222, 28, 31, 1.00);
  right: 5px;
}
.quote {
  width: 100%;
}
.titulo {
  font-size: 24px;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  text-align: center;
}
.parrafo {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  font-size: 16px;
  text-align: center;
}
.btn {
  display: block;
  width: 70px;
  height: 50px;
  background: rgba(77, 76, 184, 1.00);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bookmarks</title>


</head>

<body>

  <div id="bookmarks"></div>

  <div class="quote">
    <h1 class="titulo">Título de la cita</h1>
    <p class="parrafo">kjfkl jgdfsklhsdfjkbsjl hauñ g hgauñigh erajkh uh ad.jk hñhakjh gulhrj sjhg slkghdsjkh slh gajk gh iñhsjk jldfsh grñkj s hñihg sjdh</p>
    <button class="btn" onclick="crearLink1();"></button>
  </div>

  <div class="quote">
    <h1 class="titulo">Título de la cita</h1>
    <p class="parrafo">kjfkl jgdfsklhsdfjkbsjl hauñ g hgauñigh erajkh uh ad.jk hñhakjh gulhrj sjhg slkghdsjkh slh gajk gh iñhsjk jldfsh grñkj s hñihg sjdh</p>
    <button class="btn" onclick="crearLink2();"></button>
  </div>

  <div class="quote">
    <h1 class="titulo">Título de la cita</h1>
    <p class="parrafo">kjfkl jgdfsklhsdfjkbsjl hauñ g hgauñigh erajkh uh ad.jk hñhakjh gulhrj sjhg slkghdsjkh slh gajk gh iñhsjk jldfsh grñkj s hñihg sjdh</p>
    <button class="btn" onclick="crearLink3();"></button>
  </div>

  <div class="quote">
    <h1 class="titulo">Título de la cita</h1>
    <p class="parrafo">kjfkl jgdfsklhsdfjkbsjl hauñ g hgauñigh erajkh uh ad.jk hñhakjh gulhrj sjhg slkghdsjkh slh gajk gh iñhsjk jldfsh grñkj s hñihg sjdh</p>
    <button class="btn" onclick="crearLink4();"></button>
  </div>

</body>

</html>

问题但是这段代码有一个问题：当你关闭或刷新时它不会保存，所以我决定使用“localstorage”来保存生成的内容，但我无法找到将其实现为js以生成书签的方法页面到我的网络应用程序。有什么建议？非常感谢!!!

Answer 1

将内容存储在本地存储中很容易。

存储json / array：

localStorage.setItem("quotes", JSON.stringify({
 quote1: "This is a quote."
}));

接收：

var quotes = JSON.parse(localStorage.getItem("quotes"));

为什么我会使用stringify并解析？ 因为localStorage不接受json，只接受字符串，整数和布尔值。

Localstorage＆amp; jQuery的

1 个答案: