English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La memorizzazione locale del client HTML5, un modo di memorizzazione locale migliore rispetto ai cookie. È possibile utilizzare HTML5 per archiviare i dati di navigazione degli utenti localmente.
È possibile utilizzare HTML5 per archiviare i dati di navigazione degli utenti localmente.
In passato, la memorizzazione locale utilizzava i cookie. Ma la memorizzazione web richiede una maggiore sicurezza e velocità. Questi dati non vengono conservati sui server, ma sono utilizzati solo per richiedere dati del sito web dell'utente. Può anche archiviare una grande quantità di dati senza influenzare le prestazioni del sito.
I dati esistono in forma di coppia di chiave/valore, i dati delle pagine web web sono permessi solo per l'accesso e l'uso di questa pagina web.
Internet Explorer 8+, Firefox, Opera, Chrome e Safari supportano la memorizzazione web.
Attenzione: Internet Explorer 7 e le versioni precedenti non supportano la memorizzazione web.
I due oggetti di archiviazione dati del client sono:
localStorage - Utilizzato per salvare a lungo termine i dati dell'intero sito, i dati salvati non hanno una scadenza fino a quando non vengono rimossi manualmente.
sessionStorage - Utilizzato per salvare temporaneamente i dati della stessa finestra (o scheda), che verranno eliminati dopo la chiusura della finestra o della scheda.
Prima di utilizzare la memorizzazione web, verificare se il browser supporta localStorage e sessionStorage:
if (typeof(Storage)!=="undefined")
{
// Sì! Supporta localStorage e sessionStorage.
// Alcuni codici.....
} else {
// Scusate! Non supporta la memorizzazione web.
}I dati memorizzati nell'oggetto localStorage non hanno limiti di tempo. I dati saranno disponibili anche il giorno successivo, la prossima settimana o l'anno prossimo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base (oldtoolbag.com)</title>
</head>
<body>
<div id="result"></div>
<script>
if (typeof(Storage)!=="undefined")
{
localStorage.sitename = "基础教程网";
document.getElementById("result").innerHTML = "Nome del sito: " + localStorage.sitename;
}
else
{
document.getElementById("result").innerHTML="Spiacenti, il tuo browser non supporta la memorizzazione web.";
}
</script>
</body>
</html>Prova a vedere ‹/›Esempio di analisi:
Crea una coppia di chiave/valore per localStorage utilizzando key="sitename" e value="基础教程网".
Ricerca del valore con chiave "sitename" e inserimento dei dati nell'elemento con id="result".
Gli esempi di cui sopra possono essere scritti anche così:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base (oldtoolbag.com)</title>
</head>
<body>
<script>
// Salva
localStorage.sitename = "基础教程网";
// Cerca
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>Prova a vedere ‹/›Rimuovi "sitename" dal localStorage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base (oldtoolbag.com)</title>
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>Prova a vedere ‹/›Sia che si tratti di localStorage o sessionStorage, le API disponibili sono le stesse, tra cui le più comuni sono le seguenti (ad esempio, localStorage):
Salva i dati: localStorage.setItem(key, value);
Leggi i dati: localStorage.getItem(key);
Elimina un singolo dato: localStorage.removeItem(key);
Elimina tutti i dati: localStorage.clear();
Ottieni la chiave dell'indice: localStorage.key(index);
Suggerimento: Gli elementi chiave/valore sono solitamente memorizzati come stringhe, ma puoi convertirli nel formato desiderato.
Esempio di come mostrare il numero di volte che l'utente ha cliccato il pulsante.
Conversione dei valori stringa in tipo numerico nel codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base (oldtoolbag.com)</title>
<script>
function clickCounter()
{
if (typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="Hai cliccato il pulsante " + localStorage.clickcount + " volte";
}
else
{
document.getElementById("result").innerHTML="Spiacenti, il tuo browser non supporta la memorizzazione web.";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Clicca qui!</button></p>
<div id="result"></div>
<p>Clicca su questo pulsante per vedere l'aumento del contatore.</p>
<p>Chiudi la scheda del browser (o la finestra), riapri questa pagina e il contatore continuerà a contare (non verrà azzerato).</p>
</body>
</html>Prova a vedere ‹/›Il metodo sessionStorage memorizza dati per una sessione. Quando l'utente chiude la finestra del browser, i dati vengono eliminati.
Come creare ed accedere a una sessionStorage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base (oldtoolbag.com)</title>
<script>
function clickCounter()
{
if (typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="In questa sessione hai cliccato il pulsante " + sessionStorage.clickcount + " volte";
}
else
{
document.getElementById("result").innerHTML="Spiacenti, il tuo browser non supporta la memorizzazione web";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Clicca qui!</button></p>
<div id="result"></div>
<p>Clicca su questo pulsante per vedere l'aumento del contatore.</p>
<p>Chiudi la scheda del browser (o la finestra), riapri questa pagina e il contatore verrà reimpostato.</p>
</body>
</html>Prova a vedere ‹/›Il programma della lista dei siti web realizza le seguenti funzioni:
Puoi inserire il nome del sito e l'indirizzo web, salvandoli in localStorage con il nome del sito come chiave;
Trova l'indirizzo web in base al nome del sito;
Elenca tutti i siti salvati correntemente;
Il seguente codice viene utilizzato per salvare e cercare dati:
//Salva i dati
function save(){}
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("Aggiunto con successo");
}
// Ricerca dei dati
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "Il sito è: " + sitename;
}Ecco un esempio completo di dimostrazione:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articolo su Web Storage locale di HTML5</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">Nome del sito(key):</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">Indirizzo web(value):</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="Aggiungi record"/>
<hr/>
<label for="search_phone">Inserisci il nome del sito:</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="Cerca sito"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
// Carica tutti i dati memorizzati in localStorage
loadAll();
//Salva i dati
function save(){}
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("Aggiunto con successo");
}
// Ricerca dei dati
function find(){
var search_site = document.getElementById("search_site").value;
var siteurl = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "Il sito è: " + siteurl;
}
// Estrarre tutti gli oggetti memorizzati nel localStorage e mostrarli sull'interfaccia utente
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>chiave</td><td>valore</td></tr>";
for(var i=0; i<localStorage.length; i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}
list.innerHTML = "I dati sono vuoti...";
}
}
</script>
</body>
</html>Prova a vedere ‹/›Schermate di effetto implementato:
L'esempio sopra è solo per dimostrare un semplice localStorage per memorizzare e cercare, in molti casi i dati che memorizziamo saranno più complessi.
Successivamente utilizzeremo JSON.stringify per memorizzare i dati dell'oggetto, JSON.stringify può convertire un oggetto in una stringa.
var site = new Object; ... var str = JSON.stringify(site); // Convertire l'oggetto in una stringa
Successivamente utilizziamo il metodo JSON.parse per convertire la stringa in un oggetto JSON:
var site = JSON.parse(str);
Codice JavaScript per l'esecuzione:
//Salva i dati
function save(){}
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // Convertire l'oggetto in una stringa
localStorage.setItem(site.keyname, str);
alert("Salvataggio avvenuto con successo");
}
// Ricerca dei dati
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}Esempio completo di seguito:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articolo su Web Storage locale di HTML5</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="keyname">Alias(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/>
<br/>
<label for="sitename">Nome sito:</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">Indirizzo web:</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="Aggiungi record"/>
<hr/>
<label for="search_phone">Inserisci alias(key):</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="Cerca sito"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
//Salva i dati
function save(){}
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // Convertire l'oggetto in una stringa
localStorage.setItem(site.keyname, str);
alert("Salvataggio avvenuto con successo");
}
// Ricerca dei dati
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}
// Estrarre tutti gli oggetti memorizzati nel localStorage e mostrarli sull'interfaccia utente
// Assicurarsi che il valore associato a keyname nel localStorage sia un oggetto di conversione, altrimenti JSON.parse genererà un errore
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
for(var i=0; i<localStorage.length; i++){
var keyname = localStorage.key(i);
var str = localStorage.getItem(keyname);
var site = JSON.parse(str);
result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}
list.innerHTML = "Dati vuoti...";
}
}
</script>
</body>
</html>Prova a vedere ‹/›L'output di loadAll nel esempio ha restituito tutti i dati memorizzati, devi assicurarti che i dati memorizzati in localStorage siano in formato JSON, altrimenti JSON.parse(str) genererà un errore.
Esempio di Output: