Локальное хранилище - демо-версия HTML5 с кодом

Ответ 1

Посмотрите MDC-DOM Storage или W3C Webstorage draft (ok, меньше демо и более подробное описание). Но API не такой уж огромный.

Ответ 2

Здесь jsfiddle демо

(копия связанного кода js, использование localStorage вызывается в комментариях)

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

Ответ 3

Вот пример HTML5 LocalStorage.

Вот пример скрипта http://jsfiddle.net/ccatto/G2SyC/2/.

Простым кодом будет:

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

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

Вот более полный пример кода, в который вы вводите текст в текстовое поле и нажмите кнопку. Затем текст сохраняется в LocalStorage и извлекается и отображается в 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>

Надеюсь, это поможет!

Ответ 4

Локальное хранилище является частью API HTML5 - это объект, и мы можем получить доступ к этому объекту и его функциям с помощью JavaScript. Во время этого урока мы будем использовать JavaScript, чтобы взглянуть на основы локального объекта хранения и как мы можем хранить и извлекать данные на стороне клиента.

Локальные элементы хранилища устанавливаются в парах ключ/значение, поэтому для каждого элемента, который мы хотим сохранить на клиенте (конечное пользовательское устройство), нам нужен ключ - этот ключ должен быть непосредственно связан с данными, которые он сохраненный рядом.

Существует несколько методов и важное свойство, к которым у нас есть доступ, поэтому давайте начнем.

Вы вводите этот код в документ HTML5 внутри тегов script.

Элементы настройки

Прежде всего, у нас есть метод setItem(), который принимает в качестве аргумента пару ключ/значение (или иногда называемую именем/значением). Этот метод очень важен, поскольку он позволит нам фактически хранить данные на клиенте; этот метод не имеет определенного возвращаемого значения. Метод setItem() выглядит так:

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

Получение элементов

Теперь, когда мы посмотрели на хранение некоторых данных, вы можете получить некоторые из этих данных из локального хранилища. Для этого у нас есть метод getItem(), который принимает ключ в качестве аргумента и возвращает связанное с ним строковое значение:

localStorage.getItem("Name");

Удаление элементов

Другим методом, представляющим для нас интерес, является метод removeItem(). Этот метод удалит элементы из локального хранилища (мы поговорим немного больше о том, как "опорожнить локальное хранилище позже" ). Метод removeItem() принимает ключ в качестве аргумента и удаляет значение, связанное с этим ключом. Он выглядит так:

localStorage.removeItem("Name");

Вот пример.

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