Jquery ： 如何允许用户在本地存储中动态添加<一个 href> 链接

Question

这是一个工作项目。我有一个书签页面，其中包含我们的内部链接，如下所示。 这些书签是所有用户的标准，但我希望用户能够使用自己的URL动态添加自定义书签，并通过本地存储进行存储。(如果不是太难，也许是图像，或者所有自定义图像的标准图像(

我怎样才能在Jquery中做到这一点。 最终结果：让用户输入 URL>名称>图标链接(或默认图像(+ 提交按钮。提交后，他们的按钮将添加到这些书签的主div 中。

我在其他地方找到但无法使用它的东西

$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});

// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
	if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});

a.btn {
display: inline-block;
color: #666;
background-color: #eee;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-width: 3px;
position: right;
}
a.btn:hover {
background-color: #e3e3e3;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn:active {
background-color: #CCC;
border-color: rgba(0, 0, 0, 0.9);
}
/* blue button */
a.btn.btn-blue {
background-color: #fff;
background-size: 100%;
background-image: -moz-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: -webkit-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: radial-gradient(#33a7ff 0%, #283991 85%);
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-blue:hover {
background-color: #4F87A2;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-blue:active {
background-color: #3C677B;
border-color: rgba(0, 0, 0, 0.9);
}
/* red button */
a.btn.btn-red {
background-color: #E48681;
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-red:hover {
background-color: #DA4F49;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-red:active {
background-color: #B32C24;
border-color: rgba(0, 0, 0, 0.9);
}
.a-btn {
background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f', GradientType=0);
padding-left: 90px;
padding-right: 20px;
height: 70px;
width: 180px;
display: inline-block;
position: relative;
border: 1px solid #0099cc;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: center;
clear: both;
margin: 3px 3px;
overflow: hidden;
-webkit-transition: box-shadow 0.3s ease-in-out;
-moz-transition: box-shadow 0.3s ease-in-out;
-o-transition: box-shadow 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out;
}
.a-btn img {
position: absolute;
left: 15px;
top: 13px;
border: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text {
position: absolute;
font-size: 16px;
top: 18px;
left: 18px;
color: #6d954e;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.a-btn-text {
padding-top: 13px;
display: block;
font-size: 16px;
text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small {
display: block;
font-size: 11px;
letter-spacing: 1px;
}
.a-btn:hover {
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
}
.a-btn:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-ms-transform: scale(10);
-o-transform: scale(10);
transform: scale(10);
opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span {
opacity: 1;
}
.a-btn:active {
position: relative;
top: 1px;
background: #80ab5d;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}

<a href="somelinkhere" class="a-btn" target="_blank">
<span class="a-btn-slide-text"></span>
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/256/jquery-icon.png" alt="link" width=48 height=48" />
<span class="a-btn-text "><small></small>NAME OF LINK</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>

Answer 1

const body = document.body;
const input = document.querySelector("input[type=text]");
const overlay = document.querySelector(".overlay");
function showFloater() {
body.classList.add("show-floater");
}
function closeFloater() {
if (body.classList.contains("show-floater")) {
body.classList.remove("show-floater");
}
}
input.addEventListener("focusin", showFloater);
overlay.addEventListener("click", closeFloater);
// =========================
const bookmarksList = document.querySelector(".bookmarks-list");
const bookmarkForm = document.querySelector(".bookmark-form");
const bookmarkInput = bookmarkForm.querySelector("input[type=text]");
const bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];
const apiURL = "https://opengraph.io/api/1.0/site";
const appID = "5900185f9b8ad70f00f5f8bd";
fillList(bookmarks);
function createBookmark(e) {
e.preventDefault();
if (!bookmarkInput.value) {
alert("Gotta add a link!");
return;
}
const url = encodeURIComponent(bookmarkInput.value);
// add a new bookmark to the bookmarks
fetch(`${apiURL}/${url}?app_id=${appID}`)
.then(response => response.json())
.then(data => {
const title = bookmarkInput.value;
const bookmark = {
title: data.hybridGraph.title,
image: data.hybridGraph.image,
link: data.hybridGraph.url
};
bookmarks.push(bookmark);
fillList(bookmarks);
storeBookmarks(bookmarks);
bookmarkForm.reset();
})
.catch(error => {
alert(
'There was a problem retrieving the information. Please try again. Make sure to include the "http://"'
);
});
}
function fillList(bookmarks = []) {
const bookmarksHtml = bookmarks
.map((bookmark, i) => {
return `
<a href="${bookmark.link}" class="a-btn" data-id="${i}" target="_blank">
<span class="a-btn-slide-text"></span>
	  <img class="img" src="${bookmark.image}" width=64 height=64/>
<span class="a-btn-text"><small></small>${bookmark.title}</span> 
	    <span class="fa fa-times"></span>
</a>
`;
})
.join("");
bookmarksList.innerHTML = bookmarksHtml;
}
function removeBookmark(e) {
e.preventDefault();
if (!e.target.matches(".fa-times")) return;
// find the index
const index = e.target.parentNode.dataset.id;
// remove from the bookmarks using splice
bookmarks.splice(index, 1);
// fill the list
fillList(bookmarks);
// store back to localStorage
storeBookmarks(bookmarks);
}
function storeBookmarks(bookmarks = []) {
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
}
bookmarkForm.addEventListener("submit", createBookmark);
bookmarksList.addEventListener("click", removeBookmark);

a.btn {
display: inline-block;
color: #666;
background-color: #eee;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-width: 3px;
position: right;
}
a.btn:hover {
background-color: #e3e3e3;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn:active {
background-color: #CCC;
border-color: rgba(0, 0, 0, 0.9);
}
/* blue button */
a.btn.btn-blue {
background-color: #fff;
background-size: 100%;
background-image: -moz-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: -webkit-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: radial-gradient(#33a7ff 0%, #283991 85%);
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-blue:hover {
background-color: #4F87A2;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-blue:active {
background-color: #3C677B;
border-color: rgba(0, 0, 0, 0.9);
}
/* red button */
a.btn.btn-red {
background-color: #E48681;
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-red:hover {
background-color: #DA4F49;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-red:active {
background-color: #B32C24;
border-color: rgba(0, 0, 0, 0.9);
}
.a-btn {
background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f', GradientType=0);
padding-left: 90px;
padding-right: 20px;
height: 70px;
width: 180px;
display: inline-block;
position: relative;
border: 1px solid #0099cc;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: center;
clear: both;
margin: 3px 3px;
overflow: hidden;
-webkit-transition: box-shadow 0.3s ease-in-out;
-moz-transition: box-shadow 0.3s ease-in-out;
-o-transition: box-shadow 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out;
}
.a-btn img {
position: absolute;
left: 15px;
top: 13px;
border: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text {
position: absolute;
font-size: 16px;
top: 18px;
left: 18px;
color: #6d954e;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.a-btn-text {
padding-top: 13px;
display: block;
font-size: 16px;
text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small {
display: block;
font-size: 11px;
letter-spacing: 1px;
}
.a-btn:hover {
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
}
.a-btn:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-ms-transform: scale(10);
-o-transform: scale(10);
transform: scale(10);
opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span {
opacity: 1;
}
.a-btn:active {
position: relative;
top: 1px;
background: #80ab5d;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
.content {
margin: 0 auto;
position: relative;
font-size: 16px;
line-height: 1.5;
max-width: 1070px !important;
}
}
.floater {
background: #ffffff;
border-radius: 5px;
margin-bottom: 30px;
;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4) all;
z-index: 11;
}
.floater input[type=text] {
padding: 30px 20px;
border: none;
box-shadow: none;
font-size: 14px;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4) all;
}
.floater-bottom {
padding: 6px 10px 7px;
text-align: right;
border-top: 1px solid #DDD;
color:white ;
}
.floater-bottom button {
padding: 4px 8px;
font-size: 12px;
background-color: #b0b3b5;
border: none;
}
.floater-bottom:hover button {
background: #b0b3b5;
text-decoration: none;
}
.overlay {
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
opacity: 0;
transition: 0.3s ease opacity;
z-index: 10;
pointer-events: none;
}
body.show-floater .floater {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
body.show-floater .floater input[type=text] {
padding: 50px 20px;
font-size: 18px;
}
body.show-floater .overlay {
opacity: 1;
pointer-events: all;
}
/*Bookmark List*/
.bookmarks-list {
position: relative;
z-index: 9;
}
.bookmark {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
background: rgba(22, 47, 59, 0.8);
color: #fff;
padding: 20px;
transition: 0.3s ease all;
border-bottom: 1px solid #ddd;
font-size: 16px;
}
.bookmark:hover {
color: #36656F;
text-decoration: none;
}
.bookmark:visited .bookmark:active {
color: #fff;
text-decoration: none;
}
.bookmark:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bookmark:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: 0;
}
.bookmark .img {
background-color: #bbb;
border-radius: 5px;
background: url();
background-size: cover;
background-position: top center;
width: 120px;
height: 60px;
margin: 20px;
}
.bookmark .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bookmark .fa-trash {
position: absolute;
top: 10px;
right: 10px;
color: #ddd;
transition: 0.5s ease color;
cursor: pointer;
}
.bookmark:hover .fa-trash {
color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="floater content">
<form class="bookmark-form">
<div class="floater-top"><span  class="joy-brand__text joy-m-around--x-small">  <i  class="fa fa-star"></i> Custom Links</span>
<input type="text" class="form-control" placeholder="Paste in a link">
</div>
<div class="floater-bottom">
<button type="submit" class="btn" style="color:white">Add <i class="fa fa-plus-circle" aria-hidden="true"></i></button><a class="btn" style="color:white" href="#" data-function="localStorageBackup">Backup Bookmarks</a> <a class="btn" style="color:white" data-function="localStorageRestore" href="#">Restore Bookmarks</a><a class="btn" style="color:white" data-function="localStorageClear" href="#">Clear all Bookmarks</a>
</div>
</form>
</div>
<div class="bookmarks-list content"></div>

Answer 2

我假设你使用jStorage作为你的本地存储(但你也可以使用JS cookie;请注意，jQuery cookie不再维护(。

$(document).ready(function () {
links = new array();
$('.store').on('click', function() {
var linkToStore = $(this).attr('href');
links.push(linkToStore);
$.jStorage.set('linksList', links, { TTL: 28800000 });
}
myUrls = $.jStorage.get('linksList', '');
});