ホームページ > ウェブフロントエンド > H5 チュートリアル > WebStorageの詳しい紹介【html5のローカルデータ処理】

WebStorageの詳しい紹介【html5のローカルデータ処理】

黄舟
リリース: 2017-03-14 15:51:03
オリジナル
1494 人が閲覧しました

以下のエディターは、Web ストレージ [html5ローカル データ処理] の詳細な分析を提供します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者と一緒に見に来てください。皆さんのゲームが幸せになることを祈っています

1. webStorage とは何ですか?

webStorage は HTML5 のローカライズされたストレージのメソッドです。以前は

ストレージ メソッドを使用していました。では、それらの違いは何でしょうか?

Ⅰ. Cookie の問題:

ⅰ. Cookie はサーバーにリクエストを送信する必要があり、サーバーはブラウザの

キャッシュ

に保存される cookieId を返すため、一定量の帯域幅を消費します。 [Cookie は各 HTTP リクエスト ヘッダー情報とともに送信されるため、ネットワーク トラフィックが増加します];

Ⅱ. Cookie によって保存されるデータ容量は制限されており、IE6 では約 2K しか保存できません。 Webstorage はデータをローカルに保存するだけで済みます

3. 簡単な例を挙げて説明します

例: ユーザー名とパスワードを入力し、 ボタン 1 をクリックしてデータを保存し、ボタン 2 をクリックします。 、ページ更新も取得できます:

イベント


    ii を作成します。


スクリプトコード

内容をクリップボードボードにコピーします

XML/HTML Code复制内容到剪贴板
function MyClick1()   
{   
}
ログイン後にコピー


ⅳ ユーザー名とパスワードを取得した後、データを保存するにはどうすればよいですか? 2 つの方法があります:

①。最初の方法: Firefox2+ の Firefox ブラウザ で使用される

    Lifecycle
  1. : この方法で保存されたデータは、ウィンドウ レベルでのみ有効です。同じウィンドウ (またはタブ) ページが更新またはジャンプされると、ローカルに保存されたデータが取得される可能性があります。新しいウィンドウまたはページが開かれると、元のデータは無効になります (現在のページのみ)

    欠点: IE はサポートしません。データの永続性を実現できません。


JavaScript コードコンテンツをクリップボードにコピーします

    var username = $("#TxtUserName").val();
    ログイン後にコピー
  1. 注: sessionStorage.setItem はキーと値のペアで保存されます。

② 2 番目の方法: localStor。年齢 LocalStorage は Web Storage Internet Storage 仕様の一部であり、現在 Firefox 3.5、Safari 4、および IE8 でサポートされています。

ライフサイクル: ローカル C ドライブに保存され、ブラウザを閉じて開いた後もそこに残ります。

欠点: 下位バージョンのブラウザではサポートされていません。

var pwd = $("#TxtPwd").val();
ログイン後にコピー



ⅴ.print

ⅵ.ボタン2は上記のデータをすべて印刷します

最初のタイプの印刷方法: WebStorageの詳しい紹介【html5のローカルデータ処理】

りー

  • 2番目の印刷方法

    sessionStorage.setItem(
    "k_username"
    , username);            sessionStorage.setItem(
    "k_pwd"
    , pwd);
    ログイン後にコピー




ⅶ. localStorageのremoveItemメソッド

    JavaScript Code复制内容到剪贴板
    localStorage.setItem("k_username", username);   
               localStorage.setItem("k_pwd",pwd);
    ログイン後にコピー
    JavaScript Code复制内容到剪贴板
    alert("保存成功!");
    ログイン後にコピー
  • ローカルデータを追跡:



  • 結果表示:

WebStorageの詳しい紹介【html5のローカルデータ処理】 WebStorageの詳しい紹介【html5のローカルデータ処理】

ⅷ.localStorage的clear方法


//如果我想把所有数据都清除?localStorage有个方法
ログイン後にコピー
localStorage.clear();
ログイン後にコピー

结果显示:

WebStorageの詳しい紹介【html5のローカルデータ処理】 WebStorageの詳しい紹介【html5のローカルデータ処理】

代码显示:

XML/HTML Code复制内容到剪贴板




    
    
    
    


    
用户名:
密码:
ログイン後にコピー


4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板
<!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>
ログイン後にコピー


   效果显示:

               WebStorageの詳しい紹介【html5のローカルデータ処理】

                     WebStorageの詳しい紹介【html5のローカルデータ処理】

以上がWebStorageの詳しい紹介【html5のローカルデータ処理】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート