本地存储和 Jquery答案

【问题标题】：Localstorage & Jquery本地存储和 Jquery
【发布时间】：2016-02-05 16:30:05
【问题描述】：

我需要有关本地存储相关问题的帮助。

场景我正在开发一个引用的网络应用程序，它需要一个书签系统来保存用户更喜欢的引用。为了解决这个问题，我开发了一个 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中生成书签的方法页面进入我的网络应用程序。有什么建议么？非常感谢！！！

【问题讨论】：

标签： jquery css html local-storage

【解决方案1】：

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

存储一个 json/数组：

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

接收：

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

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

【讨论】：

谢谢！但我认为我在问题上犯了一个错误......正确的问题是如何存储动态生成的内容（带有链接的div）？再次感谢