Localstorage＆Jquery

我需要本地存储相关问题的帮助。Localstorage＆Jquery

方案我开发引号的web应用程序，它需要一个书签系统，节省用户更喜欢的报价。为了弄清楚这个问题，我已经开发出通过“点击”功能动态生成一个div jQuery的内容（见下文）：

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的方式以在我的web应用程序中生成书签页。有什么建议吗？非常感谢！

来源

2016-02-05 Albert

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

存储一个JSON /数组：

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

接收：

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

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

来源

2016-02-05 08:30:05 Roboroads

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

Localstorage＆Jquery

回答

相关问题