WebStorageの詳しい紹介【html5のローカルデータ処理】-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-14 15:51:03

オリジナル

1473 人が閲覧しました

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

1. webStorage とは何ですか?

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

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

Ⅰ. Cookie の問題:

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

キャッシュ

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

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

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

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

ⅰ

イベント

スクリプトコード

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

XML/HTML Code复制内容到剪贴板
function MyClick1()   
{   
}

ログイン後にコピー

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

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

: この方法で保存されたデータは、ウィンドウレベルでのみ有効です。同じウィンドウ (またはタブ) ページが更新またはジャンプされると、ローカルに保存されたデータが取得される可能性があります。新しいウィンドウまたはページが開かれると、元のデータは無効になります (現在のページのみ)
欠点: IE はサポートしません。データの永続性を実現できません。

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

var username = $("#TxtUserName").val();

ログイン後にコピー

注: 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のローカルデータ処理】

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

ログイン後にコピー

localStorage.clear();

ログイン後にコピー

结果显示:

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のローカルデータ処理】