HTML 5のWeb Storage(sessionStorage||localStorage)の理解と簡単な例

14891 ワード
local Strage
Web Storageとは?Web Storage機能は、その名の通り、Web上でclientに対してローカルにデータを格納する機能であり、詳細にはWeb Storageは2つに分けられる.sessionStorage:sessionオブジェクトにデータを保存します.sessionとは、ユーザーがサイトを閲覧する際に、サイトにアクセスしてからブラウザが閉じるまでの時間、つまりユーザーがこのサイトを閲覧するのにかかる時間です.セッションオブジェクトは、この間に保存する必要があるデータを保存するために使用できます.localStorage:clientローカルのハードウェアデバイス(通常はハードディスクを指し、もちろん他のハードウェアデバイスであってもよい)にデータを保存します.つまり、ブラウザが閉じられてもデータは存在し、次回ブラウザアクセスサイトを開くと、引き続き使用できます.sessionStorageとlocalStorageの違い:この2つの違いは、sessionStorageが一時的に保存され、localStorageが永続的に保存されていることです.次のセクションでは、インスタンスと組み合わせて深く学びます.
なぜwebStorageを引き出すのですか?
なぜなら、cookiesが永久データを格納するにはいくつかの問題がある.1、cookiesのサイズは4 KBに制限されている.2、cookiesはHTTPトランザクションとともに送信されるため、一部のcookiesを送信する際に使用する帯域幅を浪費する.3、cookiesの操作は煩雑で複雑である. 
 
1、1 SessionStorage:
sessionオブジェクトにデータを保存します.sessionとは、ユーザーがサイトをブラウズするときに、サイトにアクセスしてからブラウザが閉じるまでの時間のセッションです.つまり、ユーザーがこのサイトをブラウズするのにかかる時間がsessionのライフサイクルです.セッションオブジェクトは、この間に保存する必要があるデータを保存するために使用できます.
このオブジェクトには主に2つの方法があります.
データの保存:
sessionStorage.setItem(Key, value);
データの読み込み:
sessionStorage.getItem(Key);
Key:
あなたが保存するキーの名前を表します.この名前は勝手に名前をつけることができて、変数の意味によって理解することができます.
Value:
表示値、つまりKeyに格納する値であり、変数に応じて値を付与して理解することができます.
使用方法:
データの保存:
sessionStorage.setItem("website", "W3Cfuns.com");
データの読み込み:
sessionStorage.getItem("website");
exaple:
<! DOCTYPE  HTML>
< html>
    < head>
        < meta  charset= "utf-8">
        < title> SessionStorage</ title>
        < script  type= "text/javascript">
                window. onload = function()
                {
                        alert( " ，sessionStorage ， ， ， ， 。\r
，sessionStorage ， ， 。")  
                        // body 3 input
                         var msg =  document.getElementById( "msg");
                         var getData =  document.getElementById( "getData");
                         var setData =  document.getElementById( "setData");
                        setData. onclick = function(){//
                                if(msg. value){
                                        sessionStorage.setItem( "data", msg. value);
                                        alert( " data ");
                                }else{
                                        alert( " ");
                                }
                        }  
                        getData. onclick = function(){//
                                 var msg = sessionStorage.getItem( "data");
                                if(msg){
                                        alert( "data ：" + msg);
                                }else{
                                        alert( "data ！");
                                }
                        }
                }
        </ script>
    </ head>
    < body>
        < input  id= "msg"  type= "text"/>
        < input  id= "setData"  type= "button"  value= " "/>
        < input  id= "getData"  type= "button"  value= " "/>
    </ body>
</ html>

1、2 LocalStorage：
SessionStorage ， ：
：
： localStorage.setItem(Key, value);
： localStorage.getItem(Key);
Key： ， ， 。
Value： ， Key ， 。

：
： localStorage.setItem("website", "W3Cfuns.com");
： localStorage.getItem("website");
exaple:
<! DOCTYPE  HTML>
< html>
    < head>
        < meta  charset= "utf-8">
        < title> LocalStorage</ title>
        < script  type= "text/javascript">
                window. onload = function()
                {
                        alert( " ，localStorage ， ， ， 。")
                        // body 3 input
                         var msg =  document.getElementById( "msg");
                         var getData =  document.getElementById( "getData");
                         var setData =  document.getElementById( "setData");
                        setData. onclick = function(){//
                                if(msg. value){
                                        localStorage.setItem( "data", msg. value);
                                        alert( " data ");
                                }else{
                                        alert( " ");
                                }
                        } 
                        getData. onclick = function(){//
                                 var msg = localStorage.getItem( "data");
                                if(msg){
                                        alert( "data ：" + msg);
                                }else{
                                        alert( "data ！");
                                }
                        }
                }
        </ script>
    </ head>
    < body>
        < input  id= "msg"  type= "text"/>
        < input  id= "setData"  type= "button"  value= " "/>
        < input  id= "getData"  type= "button"  value= " "/>
    </ body>
</ html>

HTML 5新タグのCanvas
ブラウザの複数のタブページ間の通信