ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 学習の旅 - Html5 Web ストレージの概要 (16)

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

黄舟
リリース: 2017-02-17 14:49:58
オリジナル
1362 人が閲覧しました

キャンバスに加えて、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;
}
ログイン後にコピー
ログイン後にコピー

レンダリング

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

上記は、Html5 学習の旅 - Html5 Web Storage の概要 (16) の内容です。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。


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