私はhtml5を使用してフォームでローカルストレージを操作しようとしています。オンラインで単一のデモを見つけることができません。誰もが私に良いデモとうまくいくチュートリアルを見つけることができますか?私のブラウザは完全にサポートされています。
すべての助けに感謝します。ありがとう
MDC-DOM Storage または W3CのWebstorageドラフトを見てください (わかりました、デモを減らし、説明を増やします)。しかし、APIはそれほど大きくありません。
これが 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();
これが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>
お役に立てれば!
ローカルストレージは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>