Jquery：如何允许用户添加<a href=""> links dynamically in localstorage

时间：2017-08-23 10:34:41

标签： jquery html user-input dynamically-generated

It's a work project. I have a bookmark page with our internal links as below. These bookmarks are standard for all users however I want users to be able to add custom bookmarks using their own URL dynamically and storing it via local storage. (Maybe image if it's not too difficult, or a standard image for all custom ones)

How can I do so in Jquery. End result: Have a user input where they choose URL > Name > IconLink(Or default image) + submit button. Once submitted their button get's added to the main div for those bookmarks.

Something I found elsewhere but cannot get it to work with 

$(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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我假设您使用jStorage作为本地存储空间（但您也可以使用JS cookies;请注意，不再维护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', '');
 });
相关问题
最新问题