JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<h1>Saving Items to LocalStorage</h1>

    <hr>
        <label for='id' > Name Your Search<input type="text" id="id" /></label>
         <button class="btn btn-inverse btn-small" rel='tooltip' title='Save Up to 5 Searches' id="savemySearch"><i class="icon-white icon-star-empty"></i> Save This</button> 
     <button class="btn btn-inverse btn-small" data-placement="bottom" id='savedsearches'>0</button>
     <div id="savedSearchList" style="display:none"><ul id="savedlist"></ul></div><button id='killSearch' class='btn btn-small btn-primary'>Remove all</button>

CSS

input{width:30%;font-size:11px}

 body .popover-inner  {
   height: 250px;
   overflow:scroll;
}

JavaScript

//var fullURL = window.location;
//$("input#id").attr("placeholder",fullURL);
//var query = window.location.search;


$("#savemySearch").click(function() {
    var id = $("#id").val();
   var text = id;
    var nicename = 'nicename' + id;
    // update the result array
    var mylists = JSON.parse(localStorage.getItem("snoSearch"));
    if(mylists == null)
        mylists = [];
    
    mylists.push({link: text, name: nicename});
    // save the new result array
    localStorage.setItem("snoSearch", JSON.stringify(mylists));
    
    // append the new li
    $("#savedlist").append($("<li></li>").attr("id", id).html(text));
     $("#savedsearches").text(mylists.length)
     var countuplists = JSON.parse(localStorage.getItem("snoSearch"));
     $("#savedsearches").text(countuplists.length)

});



// on init fill the ul
var mylists = JSON.parse(localStorage.getItem("snoSearch"));
if(mylists != null) {
    for(var i=0;i<mylists.length;i++) {
        var item = mylists[i];
        $("#savedlist").append($("<li></li>").attr("id", item.name).html(item.link));
        $("#savedsearches").text(mylists.length)
    }
}


	$("#killSearch").click( function(){
							//delete keys starting with
							Object.keys(localStorage)
							      .forEach(function(key){
							           if (/^(srch-)|(snoSearch)/.test(key)) {
							               localStorage.removeItem(key);
							           
							           }
							       }); 
         $("#savedsearches").text('0');
           var popover = $('#savedsearches').data('popover');
        $('#savedsearches').attr('data-content', 'Empty');
}); 


$('body').on('click.dropdown', 'li', function() {
  
alert($(this).attr("id"));

});


       // saved searches results
                            var isVisible = false;
                            var clickedAway = false;

                            $('#savedsearches').popover({
                                html: true,
                                trigger: 'manual',
            ...