Add to favorites/bookmark using HTML5 localStorage and jQuery

问题

I want to add 'add to favorites/bookmark' feature in one of my projects, but am totally blank regarding the same.

Basically, I'm using bootstrap glyphicons for user to select it if he wants add/remove from favorites. I did some research and found html5 localStorage concept suitable but can't really figure out its exact working for my project. It would be a great help if anyone here can guide me on it.

here's html:

<h1>test</h1>
<table class="'basic">

    <tr>
        <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td>
        <td>A</td>
    </tr>
     <tr>
        <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td>
        <td>B</td>
    </tr>
     <tr>
        <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td>
        <td>C</td>
    </tr>
</table>

<br><button class="btn">You have selected:</button>

since I don't really know the implementation of localStorage in jQuery, haven't added it, yet this is what js file has for now:

$(function() {

   $(document).on('click', '.bkmark_icon', function(){

       $(this).toggleClass('glyphicon-star-empty glyphicon-star');
   // localStorage.setItem('display', $(this).is(':visible'));

   });

   $(document).on('click', '.btn', function(){
       var bkmark_item = '<table><tr><td><div class="glyphicon glyphicon-star icon bkmark_icon"></div></td><td>*selected*</td></tr></table>';
       $(bkmark_item).insertAfter('h1');

   });

});

i did search over it and found this stack overflow answer appropriate.

what I need?

when user clicks on glyphicon-star-empty, it should toggle to glyphicon-star and the related item should be added to localStorage (i.e favorites).
when user clicks on 'You have selected:' button, it should remove current content which is in table and show only the favorited items(on the same page) with an option to un-favorite it.

here's fiddle the i'm working on.

回答1:

Try creating a JavaScript object and serialize it to save it in localStorage. Use something like this -

var bookmarkedItems = [];
function ItemObject(name, content)
{
   this.name = name;
   this.content = content;
}

function addItem()
{
  bookmarkedItems.push(new ItemObject('Item1', 'Content1'));
}

function saveToLocalStorage(item)
{
  var ob = localStorage.get('KEY');
  if(ob)
  {
     bookmarkedItems = JSON.parse(ob);
  }
  bookmarkedItems.push(item);
  localStorage.set('KEY', JSON.stringify(bookmarkedItems);
}

Refer below code -

   var storageService = function () {

        var STORAGE_KEY = "bookmarkitems";
        var bookmarkitems = {};

        var init = function () {
            bookmarkitems = sessionStorage.getItem(STORAGE_KEY);
            if (bookmarkitems) {
                bookmarkitems = JSON.parse(bookmarkitems);
            }
            else {
                bookmarkitems = {};
            }
        };

        var set = function (key, value) {
            bookmarkitems[key] = value;
            updateStorage();

        };

        var get = function (key) {
            return bookmarkitems[key];
        };

        var updateStorage = function () {
            sessionStorage.setItem(STORAGE_KEY, JSON.stringify(bookmarkitems));
        };

        return {
            init: init,
            set: set,
            get: get,
            updateStorage: updateStorage
        };
    };

回答2:

Here is a small example on how to use local storage:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

You can reference this page for more examples. Using it is pretty simple it works like any JS Object.

EDIT: There are more extended examples on the functionality of local storage here.

来源：https://stackoverflow.com/questions/37253177/add-to-favorites-bookmark-using-html5-localstorage-and-jquery

标签

javascript

jquery

css

html

twitter-bootstrap