web-dev-qa-db-fra.com

Stockage local - Démo HTML5 avec code

J'essaie de travailler avec le stockage local avec des formulaires utilisant html5. Je n'arrive tout simplement pas à trouver une seule démonstration de travail en ligne. Quelqu'un peut-il me trouver une bonne démo et un tutoriel qui fonctionne. Mon navigateur est entièrement pris en charge.

Appréciez toute l'aide. Merci

javascripthtmllocal-storagedemo
21
Sanket

Jetez un oeil à MDC - Stockage DOM ou Brouillon Webstorage du W3C (ok, moins de démo et plus de description). Mais l'API n'est pas si énorme.

3
Felix Kling

Voici une démo jsfiddle

(copie du code js associé, les utilisations de localStorage sont rappelées dans les commentaires)

//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();
32
Benjol

Voici un exemple de LocalStorage HTML5.

Voici un violon http://jsfiddle.net/ccatto/G2SyC/2/ exemple de démonstration de code.

Un code simple serait:

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

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

Voici un exemple de code plus complet où vous entrez du texte dans une zone de texte et cliquez sur un bouton. Ensuite, le texte est stocké dans LocalStorage et récupéré et affiché dans une 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>

J'espère que cela t'aides!

6
Catto

Le stockage local fait partie des API HTML5 - c'est un objet et nous pouvons accéder à cet objet et à ses fonctionnalités via JavaScript. Au cours de ce didacticiel, nous utiliserons JavaScript pour jeter un œil aux principes fondamentaux de l'objet de stockage local et comment nous pouvons stocker et récupérer des données, côté client.

Les éléments de stockage local sont définis dans des paires clé/valeur, donc pour chaque élément que nous souhaitons stocker sur le client (l'appareil de l'utilisateur final), nous avons besoin d'une clé - cette clé doit être directement liée aux données avec lesquelles elle est stockée.

Il existe plusieurs méthodes et une propriété importante à laquelle nous avons accès, alors commençons.

Vous devez taper ce code dans un document HTML5, à l'intérieur de vos balises de script.

Éléments de réglage

Tout d'abord, nous avons la méthode setItem (), qui prend notre paire clé/valeur (ou parfois appelée nom/valeur) comme argument. Cette méthode est très importante, car elle nous permettra de stocker réellement les données sur le client; cette méthode n'a pas de valeur de retour spécifique. La méthode setItem () ressemble à ceci:

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

Obtention d'objets

Maintenant que nous avons examiné le stockage de certaines données, retirons certaines de ces données définies du stockage local. Pour ce faire, nous avons la méthode getItem (), qui prend une clé en argument et renvoie la valeur de chaîne qui lui est associée:

localStorage.getItem("Name");

Supprimer des éléments

Une autre méthode qui nous intéresse est la méthode removeItem (). Cette méthode supprimera les éléments du stockage local (nous parlerons un peu plus de "vidage" du stockage local plus tard). La méthode removeItem () prend une clé comme argument et supprimera la valeur associée à cette clé. Cela ressemble à ceci:

localStorage.removeItem("Name");

Voici l'exemple d'échantillon.

<!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>
2
vamsikrishnamannem