Local Storage - HTML5 demo con codice [chiusa]

Question

Sto cercando di lavorare con storage locale con moduli utilizzando HTML5. Io sono solo in grado di trovare un solo demo di lavoro on-line. Qualcuno mi può trovare un buon demo e un tutorial che le opere. Il mio browser è completamente supportato.

Apprezzare tutto l'aiuto. Grazie

Answer 1

Date un'occhiata al MDC - DOM bagagli o progetto Webstorage del W3C (ok, meno demo e più descrizione). Ma l'API non è poi così grande.

Answer 2

Ecco un jsfiddle demo

(copia del codice associato js, ??usi di localStorage sono chiamati fuori nei commenti)

//Note that if you are writing a userscript, it is a good idea
// to prefix your keys, to reduce the risk of collisions with other 
// userscripts or the page itself.
var prefix = "localStorageDemo-";

$("#save").click(function () { 
    var key = $("#key").attr('value');
    var value = $("#value").attr('value');
    localStorage.setItem(prefix + key, value);      //******* setItem()
    //localStorage[prefix+key] = value; also works
    RewriteFromStorage();
});

function RewriteFromStorage() {
    $("#data").empty();
    for(var i = 0; i < localStorage.length; i++)    //******* length
    {
        var key = localStorage.key(i);              //******* key()
        if(key.indexOf(prefix) == 0) {
            var value = localStorage.getItem(key);  //******* getItem()
            //var value = localStorage[key]; also works
            var shortkey = key.replace(prefix, "");
            $("#data").append(
                $("<div class='kvp'>").html(shortkey + "=" + value)
                   .append($("<input type='button' value='Delete'>")
                           .attr('key', key)
                           .click(function() {      //****** removeItem()
                                localStorage.removeItem($(this).attr('key'));
                                RewriteFromStorage();
                            })
                          )
            );
        }
    }
}

RewriteFromStorage();

Answer 3

Ecco un esempio di LocalStorage di HTML5.

Ecco un violino http://jsfiddle.net/ccatto/G2SyC/2/ esempio di codice demo.

Un codice semplice potrebbe essere:

// saving data into local storage
localStorage.setItem('LocalStorageKey', txtboxFooValue);

// getting data from localstorage
var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);

Ecco un esempio di codice più completo in cui si immette il testo in una casella di testo e fare clic su un pulsante. Poi il testo viene memorizzato in LocalStorage e recuperato e visualizzato in un div.

<h2>HTML LocalStorage Example</h2>

<section>
    <article>
        Web Storage example:
        <br />
        <div id="divDataLocalStorage"></div>
        <br />
        Value
        <input type="text" id="txtboxFooExampleLocalStorage" />
        <input type="button" id="btnSaveToLocalStorage" value="Save Text to Local Storage" />
    </article>
</section>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">    
    console.log("start log");  
    $("#btnSaveToLocalStorage").click(function () {
        console.log("inside btnSaveToLocalStorage Click function");
        SaveToLocalStorage();
    });

    function SaveToLocalStorage(){
        console.log("inside SaveToLocalStorage function");
        var txtboxFooValue = $("#txtboxFooExampleLocalStorage").val();
        console.log("text box Foo value  = ", txtboxFooValue);
        localStorage.setItem('LocalStorageKey', txtboxFooValue);
        console.log(" after setItem in LocalStorage");
        RetrieveFromLocalStorage();
    }

    function RetrieveFromLocalStorage() {
        console.log("inside Retrieve from LocalStorage");
        var retrivedValue = 'None';
        var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);
        $("#divDataLocalStorage").text(retrivedValue);
        console.log("inside end of retrieve from localstorge");
        console.log("retrieved value = ", retrivedValue);
    }

</script>

Spero che questo aiuti!

Answer 4

Archiviazione locale fa parte delle API HTML5 - si tratta di un oggetto e possiamo accedere a questo oggetto e la sua funzionalità tramite JavaScript. Durante questo tutorial, useremo JavaScript per dare un'occhiata ai fondamenti del oggetto di archiviazione locale e come possiamo memorizzare e recuperare i dati, lato client.

elementi di storage locali sono fissati in coppie chiave / valore, così per ogni articolo che vogliamo memorizzare sul client (dispositivo dell'utente finale), abbiamo bisogno di un-questa chiave chiave deve essere direttamente correlata ai dati che è immagazzinato a fianco.

Ci sono diversi metodi e una proprietà importante che abbiamo accesso a, quindi cerchiamo di iniziare.

è necessario digitare il codice in un documento HTML5, dentro i tag di script.

Elementi di impostazione

Per prima cosa, abbiamo il metodo setItem (), che accetta la nostra chiave / valore (o talvolta indicato come nome / valore) coppia come argomento. Questo metodo è molto importante, in quanto ci permetterà di memorizzare effettivamente i dati sul client; questo metodo non restituisce alcun valore specifico. Il metodo setItem () sembra proprio come questo:

localStorage.setItem("Name", "Vamsi");

Come Voci

Ora che abbiamo avuto uno sguardo a memorizzare alcuni dati, prendiamo alcuni che i dati definiti dalla memoria locale. Per fare questo, abbiamo il metodo getItem (), che accetta una chiave come argomento e restituisce il valore della stringa che è associato con esso:

localStorage.getItem("Name");

Rimozione di elementi

Un altro metodo di interesse per noi è il metodo removeItem (). Questo metodo rimuovere elementi dalla memoria locale (parleremo un po 'di più ‘svuotamento’ archiviazione locale in seguito). Il metodo removeItem () richiede una chiave come argomento e rimuoverà il valore ad essa associato. Sembra proprio come questo:

localStorage.removeItem("Name");

Ecco l'esempio del campione.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Local Storage</title>
        <script>
            localStorage.setItem("Name", "Vamsi");
            localStorage.setItem("Job", "Developer");
            localStorage.setItem("Address", "123 html5 street");
            localStorage.setItem("Phone", "0123456789");
            console.log(localStorage.length);
            console.log(localStorage.getItem("Name"));
            localStorage.clear();
            console.log(localStorage.length);
        </script>
    </head>
    <body>
    </body>
</html>