Хранение закладок в localStorage
by Евгений
HTML
<div class="bkbar">
<button onclick="$('.book').bookmarks({sort:'name',slice:3});" class="right">3 последние + сортировка</button>
<button onclick="$('.book').bookmarks({slice:3});" class="right">3 последние</button>
<button onclick="$('.book').bookmarks({sort:'name'});" class="right">Сортировка по имени</button>
<button onclick="$.bookmarks.add('Страница #1','/index1.html',{success:function(){$('.book').bookmarks();}});">Закладка #1</button>
<button onclick="$.bookmarks.add('Страница #2','/index2.html',{success:function(){$('.book').bookmarks();}});">Закладка #2</button>
<button onclick="$.bookmarks.add('Страница #3','/index3.html',{success:function(){$('.book').bookmarks();}});">Закладка #3</button>
<button onclick="$.bookmarks.add('Страница #4','/index4.html',{success:function(){$('.book').bookmarks();}});">Закладка #4</button>
<button onclick="$.bookmarks.add('Страница #5','/index5.html',{success:function(){$('.book').bookmarks();}});">Закладка #5</button>
</div>
<h1>Мои закладки</h1>
<div class="book"><div data-url="/index4.html" class="bookmark"><button onclick="$.bookmarks.erase('/index4.html');">Удалить</button><a href="/index4.html">Страница #4</a></div></div>
CSS
h1 {font:24px/35px Arial,sans-serif;color:#9dcd40;padding:0;margin:125px auto 0;width:300px;padding:10px;}
.right {float:right;}
.bkbar {background:#ddd;padding:10px;}
body {background:#efefef;margin:0;padding:0;}
.bkbar button {border:0;background:#e5e5e5;color:#777;font:Bold 12px Arial,sans-serif;-webkit-transition:background .3s ease,color .3s ease;-moz-transition:background .3s ease,color .3s ease;-ms-transition:background .3s ease,color .3s ease;transition:background .3s ease,color .3s ease;padding:10px;}
.bkbar button:hover {background:#9dcd40;color:#fff;}
.nobook {padding:10px;margin:10px 0;background:#cd4040;text-align:center;color:#fff;}
#puzadpn {display:none;}
.book {width:300px;background:#262626;font:Bold 12px Arial,sans-serif;margin:0 auto;padding:.1px 10px;}
.bookmark {background:#9dcd40;margin:10px 0;padding:15px 10px;}
.bookmark a {color:#fff;text-decoration:none;display:block;}
.bookmark button {font:12px Arial,sans-serif;float:right;background:rgba(255,255,255,.25);border:0;color:#fff;margin-top:-5px;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;padding:5px;}
.bookmark button:hover {background:rgba(0,0,0,.1);}
JavaScript
/*
* Bookmarks 1.0
* Автор: Kelin
* Сайт: Web41k.ru
* Копирование и распространение скрипта запрещено
*/
$.bookmarks = {
get:function(){
if(!localStorage.getItem('bookmarks')) localStorage.setItem('bookmarks','[]');
return JSON.parse(localStorage.getItem('bookmarks'));
},
search:function(url,e){
if($.bookmarks.get().length == 0) return (e, e.failed, $.isFunction(e.failed) ? e.failed.call() : false);
for(x=0;x<$.bookmarks.get().length;x++) if($.bookmarks.get()[x]['url'] == url) return (e, e.success,$.isFunction(e.success) ? e.success.call(x) : true);
return (e, e.failed, $.isFunction(e.failed) ? e.failed.call() : false);
},
add:function(name,url,e){
$.bookmarks.search(url,{
success:function(){
if(e && e.failed && $.isFunction(e.failed)) return e.failed.call();
else return alert('Такая закладка уже есть.');
},
failed:function(){
l = $.bookmarks.get();l.push({'name':name,'url':url});
localStorage.setItem('bookmarks',JSON.stringify(l));
if(e && e.success && $.isFunction(e.success)) return e.success.call();
else return alert('Закладка добавлена!');
}
});
},
erase:function(url,e){
$.bookmarks.search(url,{
success:function(){
l = $.bookmarks.get();l.splice(x,1);
localStorage.setItem('bookmarks',JSON.stringify(l));
$('[data-url="'+url+'"]').fadeOut(500,function(){$(this).remove();});
if(l.length == 0) $('.book').html('<div class="nobook">Нет закладок</div>');
if(e && e.suсcess && $.isFunction(e.success)) return e.success.call();
else return alert('Закладка удалена!');
},
failed:function(){
if(e && e.failed && $.isFunction(e.failed)) return e.failed.call();
else return alert('Закладка не найдена.');
}
});
}
}
$.fn.bookmarks = (function(opts,e){
if($.bookmarks.get().length == 0) return this.html('<div class="nobook">Нет закладок</div>');
if(opts == undefined) opts = {};
b = (opts.sort, opts.sort == 'name' ? $.bookmarks.get().sort(function(a,b){if(a.name > b.name) return 1; return -1;}) : $.bookmarks.get());
this.html('');
for(x=0;x<(opts.slice, opts.slice <...