Webストレージの徹底した分析 -- html5のローカルデータ処理-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

Webストレージの徹底した分析 -- html5のローカルデータ処理

巴扎黑

May 21, 2017 pm 07:11 PM

html5

以下のエディターは、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コードコンテンツをクリップボードにコピー

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

①. 1 つ目: sessionStorege、Firefox2+ の Firefox ブラウザーで使用されます。

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

sessionStorage.setItem(

"k_username"

, username);

注: sessionStorage 。 setITEM はキーと値のペアによって保存されました。

②. 2 番目の方法: LocalStorage LocalStorage は Web Storage インターネットストレージ仕様の一部であり、Firefox 3.5、Safari 4、および IE8 でサポートされるようになりました。

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

);

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

最初の印刷方法:

JavaScript コード

clipboard

rreee

印刷する2番目の方法

//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

ログイン後にコピー

//localStorage.removeItem("k_username");

ログイン後にコピー

跟踪本地数据情况:

结果显示:

ⅷ.localStorage的clear方法

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

ログイン後にコピー

localStorage.clear();

ログイン後にコピー

结果显示:

代码显示：

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>

ログイン後にコピー

效果显示: