Questa è una funzioni per chi fa App di reference (neologismo derivato dalle classi del market), ovvero app con documentazioni su altre cose, spesso si sente chiedere.
Come fare?
Utilizzando local storage, feature di html5, con l’aiuto di jquery:
Qui bel tutorial:
http://www.html5today.it/tutorial/html5-locastorage-tutorial-completo-usare-funzione-localstorage
Quindi:
Controllo che ci sia:
function initStorage(){
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
};
POi mi creo le variabili che mi servono, ovvero il titolo e l’url
function togleBookmark(){
var url = window.location.pathname;
var title = $("h2").text();
if(initStorage())
if(localStorage.getItem(url)==null) {
localStorage.setItem(url,title);
$( ".star" ).addClass( "starred" );
} else {
localStorage.removeItem(url);
$( ".star" ).removeClass( "starred" );
}
};

Qui controllo quando carico la pagina che se l’url è nell’elenco la stellina deve essere gialla!
function initCssBookmark() {
var url = window.location.pathname;
if(initStorage())
if(localStorage.getItem(url)!=null)
$( ".star" ).addClass( "starred" );}
E per ultimo nella pagina SEGNALIBRI, mi metto un

e poi gli metto una funzione per fargli generare una lista con queste cose per ogni elemento che esiste dentro al local storage.
function viewBookmark(){
var ul= $("\<ul\>");

for (i=0;i<localStorage.length;i++) {
var url = localStorage.key(i);
var title = localStorage.getItem(url);

ul.append("<li><a class=\"segnato\" href=\""+url+"\">"+title+"</a></li>" );
}
$("#mostraP").append(ul);
console.log(url);
console.log(title);
};
Finito!
Se vi è utile mettetemi un commento, thanks!
e condividete anche voi i vostri scriptini 😉
___
DAi ,godiamoci un altro bell’esperimento in html5 che ce lo meritiamo:
http://www.thewildernessdowntown.com/