ホームページ > 記事 > ウェブフロントエンド > Webストレージの徹底した分析 -- html5のローカルデータ処理
Webストレージの徹底した分析 -- html5のローカルデータ処理
- 巴扎黑オリジナル
- 2017-05-21 19:11:221548ブラウズ
以下のエディターは、Web ストレージ [HTML5 ローカル データ処理] の詳細な分析を提供します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者と一緒に見に来てください。皆さんのゲームが幸せになることを祈っています
1. webStorage とは何ですか?
webStorage は html5 でローカライズされたストレージに使用されるメソッドです。以前は Cookie ストレージを使用していました。では、それらの違いは何でしょうか?
Ⅰ. Cookie の問題: ⅰ. Cookie はサーバーにリクエストを送信する必要があり、サーバーはブラウザのキャッシュに保存され、一定量の帯域幅を消費します。 [Cookie は各 HTTP リクエスト ヘッダー情報とともに送信されるため、ネットワーク トラフィックが増加します];
Ⅱ. Cookie によって保存されるデータ容量は制限されており、IE6 では約 2K しか保存できません。 Webstorage はデータをローカルに保存するだけで済みます。
例: ユーザー名とパスワードを入力し、ボタン 1 をクリックし、データを保存し、ボタン 2 をクリックすると、ページを更新できます。
プロセス:
XML/HTML コード
をクリップボードにコピー
function MyClick1()
{
}ii。
JavaScriptコード
コンテンツをクリップボードにコピーvar username = $( "#TxtUserName" ).val();
ⅲ IDを介してパスワードを取得
JavaScriptコードコンテンツをクリップボードにコピー
- りー
この方法で保存されたデータは、同じウィンドウ (またはタブ) ページでのみ有効です。が更新されるか、ジャンプすることでローカルに保存されたデータを取得できます。新しいウィンドウまたはページが開かれると、元のデータは無効になります [現在のページのみ] 欠点: IE はそれをサポートしておらず、永続的なデータ ストレージを実現できません。
- JavaScript コード
- コンテンツをクリップボードにコピーします
sessionStorage.setItem(
"k_username", username);
注: sessionStorage 。 setITEM はキーと値のペアによって保存されました。②. 2 番目の方法: LocalStorage LocalStorage は Web Storage インターネット ストレージ仕様の一部であり、Firefox 3.5、Safari 4、および IE8 でサポートされるようになりました。
- ライフサイクル: ローカル C ドライブに保存され、ブラウザを閉じて開いた後もそこに残ります。
-
欠点: 下位バージョンのブラウザではサポートされていません。 ⅴ
alert( "保存に成功しました!"
ⅵ.ボタン 2 は上記のデータをすべて印刷します
最初の印刷方法:
JavaScript コード clipboard
rreee
印刷する2番目の方法 跟踪本地数据情况: 结果显示: ⅷ.localStorage的clear方法 结果显示: 代码显示： XML/HTML Code复制内容到剪贴板 4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写] XML/HTML Code复制内容到剪贴板 效果显示: //如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空
//localStorage.removeItem("k_username");
//如果我想把所有数据都清除？localStorage有个方法
localStorage.clear();
用户名:
密码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
//4.页面刷新之后判断它是否为空？
if (localStorage.getItem("k_showCon") != null) {
//5.存在，就把获取到的内容存到里面去
"k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));
}
});
function preservationClick()
{
var sCon = $("#mCon").val();
//2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法
$("#showCon").append("<p>" + sCon + "</p>");
//3.预期的是刷新之后留言还在
localStorage.setItem("k_showCon", $("#showCon").html());
}
function ClearClick()
{
//6.获取到显示p里面的内容清除
$("#showCon").html("");
localStorage.clear();
}
</script>
</head>
<body>
<p>
<table>
<tr>
<td colspan="2">
<textarea id="mCon" cols="25" rows="10"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="留言" onclick="preservationClick()" /></td>
<td><input type="button" value="清除" onclick="ClearClick()" /></td>
</tr>
</table>
<p id="showCon"></p>
</p>
</body>
</html>
以上がWebストレージの徹底した分析 -- html5のローカルデータ処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。