I'm experiencing an issue with localstorage that I need help with.
Context I am currently working on a web application for quotes that requires a bookmark system to save users' favorite quotes. To address this issue, I have created a jQuery script that dynamically generates a div through an "onclick" function (as shown below):
function createLink1() {
jQuery('<div class="item"><a>Dynamically created element 1</a><button class="delete-button"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}
function createLink2() {
jQuery('<div class="item"><a>Dynamically created element 2</a><button class="delete-button"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}
function createLink3() {
jQuery('<div class="item"><a>Dynamically created element 3</a><button class="delete-button"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}
function createLink4() {
jQuery('<div class="item"><a>Dynamically created element 4</a><button class="delete-button"></button></div>').find('a').attr('href', '#').end().appendTo('#bookmarks');
}
$(document).on('click', '.delete-button', 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);
}
.delete-button {
width: 28px;
height: 28px;
background: rgba(222, 28, 31, 1.00);
right: 5px;
}
.quote {
width: 100%;
}
.title {
font-size: 24px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
text-align: center;
}
.paragraph {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 16px;
text-align: center;
}
.button {
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="title">Quote Title</h1>
<p class="paragraph">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="button" onclick="createLink1();"></button>
</div>
<div class="quote">
<h1 class="title">Quote Title</h1>
<p class="paragraph">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="button" onclick="createLink2();"></button>
</div>
<div class="quote">
<h1 class="title">Quote Title</h1>
<p class="paragraph">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="button" onclick="createLink3();"></button>
</div>
<div class="quote">
<h1 class="title">Quote Title</h1>
<p class="paragraph">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="button" onclick="createLink4();"></button>
</div>
</body>
</html>Issue Unfortunately, the current code doesn't save when the page is closed or refreshed. To rectify this, I plan to utilize "localstorage" to save the generated content, but I'm struggling to implement it into the JavaScript to create bookmark pages within my web application. Any suggestions or solutions would be greatly appreciated! Thank you!