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

<!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 はデータをローカルに保存する方法を提案しています: 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;
}

ログイン後にコピー