HTML5 学習の旅 - Html5 Web ストレージの概要 (16)-H5 チュートリアル-php.cn

HTML5 学習の旅 - Html5 Web ストレージの概要 (16)

黄舟

リリース： 2017-02-17 14:49:58

オリジナル

1338 人が閲覧しました

キャンバスに加えて、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(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></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;
}

ログイン後にコピー

もリロードされます。！！！レンダリング

HTML5 学習の旅 - Html5 Web ストレージの概要 (16)

ローカルストレージの例

インデックスコードは変更されていません。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 ストレージの概要 (16)

キャンバスに加えて、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(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></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;
}

ログイン後にコピー

もリロードされます。！！！レンダリング

HTML5 学習の旅 - Html5 Web ストレージの概要 (16)

ローカルストレージの例

インデックスコードは変更されていない、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;
}

ログイン後にコピー