ホームページ > 記事 > ウェブフロントエンド > HTML5 学習の旅 - Html5 Web ストレージの概要 (16)
HTML5 学習の旅 - Html5 Web ストレージの概要 (16)
- 黄舟オリジナル
- 2017-02-17 14:49:581279ブラウズ
キャンバスに加えて、HTML5 のもう 1 つの非常に重要な機能は、クライアント側のローカル ストレージ Web ストレージです。以前は、ユーザー名やその他の情報がユーザー側の Cookie に保存されていました。その後、次の問題があることが判明しました。 Cookie ストレージあり:
サイズ: Cookie サイズは約 4kb に制限されています
帯域幅: Cookie は HTTP ビジネスと一緒に送信されるため、帯域幅の一部が無駄になります
複雑さ: Cookie を正しく操作するのは非常に困難です
上記の問題に対応して、html5 はデータをローカルに保存する方法を提案しました: Web ストレージ
2 つの処理方法があります:
セッション ストレージ: データをセッション オブジェクトに保存します。セッションとは、ユーザーがWebサイトを開いてからWebサイトを閉じるまでの時間、つまりユーザーがWebサイトを閲覧した時間のことです。セッション オブジェクトは、この期間中のすべてのデータを保存できます。
ローカルストレージ: ユーザーのブラウザが閉じている場合でも、クライアントのハードウェア (ハードドライブ) にデータを保存します。次回開くと、
セッション ストレージ インスタンス
index.html コード
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>appWeb コード
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}もリロードされます。 ！ ！ ！レンダリング
ローカル ストレージの例
インデックス コードは変更されていません。js コード
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}レンダリング
キャンバスに加えて、HTML5 のもう 1 つの非常に重要な機能は、クライアントの Web ストレージのローカル ストレージです。以前は、ユーザー名やその他の情報がユーザー側の Cookie に保存されていましたが、後に Cookie のストレージに次の問題があることが判明しました:
サイズ: Cookie のサイズは約 4kb に制限されています
帯域幅: Cookie はしたがって、帯域幅の一部が無駄になります
複雑さ: Cookie を正しく操作することは非常に困難です
上記の問題に対応して、HTML5 はデータをローカルに保存する方法を提案しています: Web ストレージ
2 つの処理方法があります:
セッション ストレージ: データをセッション オブジェクトに保存します。セッションとは、ユーザーがWebサイトを開いてからWebサイトを閉じるまでの時間、つまりユーザーがWebサイトを閲覧した時間のことです。セッション オブジェクトは、この期間中のすべてのデータを保存できます。
ローカルストレージ: ユーザーのブラウザが閉じている場合でも、クライアントのハードウェア (ハードドライブ) にデータを保存します。次回開くと、
セッション ストレージ インスタンス
index.html コード
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>appWeb コード
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}もリロードされます。 ！ ！ ！レンダリング
ローカル ストレージの例
インデックス コードは変更されていない、js コード
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}レンダリング
上記は、Html5 学習の旅 - Html5 Web Storage の概要 (16) の内容です。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。