21

html5 を使用したフォームでローカル ストレージを操作しようとしています。オンラインで動作するデモを 1 つも見つけることができません。誰かが私に良いデモと機能するチュートリアルを見つけてくれますか. 私のブラウザは完全にサポートされています。

すべての助けに感謝します。ありがとう

4

4 に答える 4

33

これが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();
于 2011-03-17T08:04:59.860 に答える
7

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>

お役に立てれば！

于 2014-03-13T02:45:00.783 に答える
3

MDC - DOM StorageまたはW3C の Webstorage ドラフトをご覧ください(わかりました、デモは少なくなり、説明が増えました)。しかし、API はそれほど巨大ではありません。

于 2010-12-16T14:42:44.650 に答える
2

ローカル ストレージは HTML5 API の一部です。これはオブジェクトであり、JavaScript を介してこのオブジェクトとその機能にアクセスできます。このチュートリアルでは、JavaScript を使用して、ローカル ストレージ オブジェクトの基礎と、クライアント側でデータを保存および取得する方法を確認します。

ローカル ストレージ アイテムはキーと値のペアで設定されるため、クライアント (エンド ユーザーのデバイス) に保存するアイテムごとにキーが必要です。このキーは、一緒に保存されるデータに直接関連付けられている必要があります。

アクセスできる複数のメソッドと重要なプロパティがあるので、始めましょう。

このコードを HTML5 ドキュメントのスクリプト タグ内に入力します。

設定項目

まず、setItem() メソッドがあります。このメソッドは、キー/値 (または名前/値と呼ばれることもあります) のペアを引数として受け取ります。この方法は、実際にクライアントにデータを保存できるため、非常に重要です。このメソッドには特定の戻り値はありません。setItem() メソッドは次のようになります。

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

アイテムの入手

いくつかのデータの保存について見てきたので、その定義されたデータの一部をローカル ストレージから取り出してみましょう。これを行うには、引数としてキーを取り、それに関連付けられた文字列値を返す getItem() メソッドがあります。

localStorage.getItem("Name");

アイテムの削除

もう 1 つの興味深いメソッドは 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>
于 2015-02-19T19:47:10.363 に答える