コメント:LocalStorage(Local Storage)は、データを長時間、1日、1年、2年、さらに長く保存できます。データを使用できます。SessionStorage(セッションストレージ)は、ブラウザを閉じる前にのみ、別のページを作成するときに使用できます。
HTML5 WebストレージのLocalStorageおよびSessionStorageメソッドを使用して、WebページデータLocalStorageを保存します。
ページは、下の図に示すように参照され、ページ上のデータはローカルに保存できます。保存されたデータを読み取り、ページに表示できます。
LocalStorage(Local Storage)は、データを使用することができます。
ブラウザが閉じる前にのみ使用できるSessionStorageは、別のページを作成するときに使用でき、ブラウザを閉じるとデータが消えます。
ブロガーのテストLocalStorageの互換性の状況は次のとおりです。
Chrome4+は、LocalStorageのサポートを開始します
Firefox3.5+は、LocalStorageをサポートし始めます
Firefox1.5+はGlobalStorageをサポートしています
IE8+はLocalStorageをサポートしています
IE7互換モードは、LocalStorageをサポートしています
IE5.5+はuserDataをサポートします
Safari 4+はLocalStorageをサポートしています
Opera10.5+はLocalStorageをサポートしています
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style type = "text/css">
Textarea {
幅:300px;
高さ:300px;
}
。ボタン {
幅:100px;
}
</style>
</head>
<body>
<script type = "text/javascript">
// Webページデータのローカルストレージには、HTML5 WebストレージのLocalStorageおよびSessionStorageメソッドを使用します。
//次の図を参照して、ページにローカルにデータを保存します。保存されたデータを読み取り、ページに表示できます。
function savessession(){
var t1 = document.getElementById( "T1");
var t2 = document.getElementById( "T2");
var mydata = t2.value;
var ostorage = window.sessionstorage;
ostorage.mydata = mydata;
t1.value + = "sessionstorage save mydata:" + mydata + "/n";
}
function readsession(){
var t1 = document.getElementById( "T1");
var ostorage = window.sessionstorage;
var mydata = "存在しない";
if(ostorage.mydata){
mydata = ostorage.mydata;
}
t1.value + = "sessionstorage読み取りmydata:" + mydata + "/n";
}
function cleansession(){
var t1 = document.getElementById( "T1");
var ostorage = window.sessionstorage;
var mydata = "存在しない";
if(ostorage.mydata){
mydata = ostorage.mydata;
}
ostorage.removeItem( "mydata");
t1.value + = "sessionstorageclear mydata:" + mydata + "/n";
}
function savestorage(){
var t1 = document.getElementById( "T1");
var t2 = document.getElementById( "T2");
var mydata = t2.value;
var ostorage = window.localstorage;
ostorage.mydata = mydata;
t1.value + = "localstorage save mydata:" + mydata + "/n";
}
関数readstorage(){
var t1 = document.getElementById( "T1");
var ostorage = window.localstorage;
var mydata = "存在しない";
if(ostorage.mydata){
mydata = ostorage.mydata;
}
t1.value + = "localstorage reads mydata:" + mydata + "/n";
}
function cleanstorage(){
var t1 = document.getElementById( "T1");
var ostorage = window.localstorage;
var mydata = "存在しない";
if(ostorage.mydata){
mydata = ostorage.mydata;
}
ostorage.removeItem( "mydata");
t1.value + = "localstorageclear mydata:" + mydata + "/n";
}
</script>
<div>
<Textarea> </textarea>
<label>保存するデータ:</label>
<入力型= "text" />
<入力型= "button" value = "sessionsave" />
<入力型= "button" value = "session read" />
<入力型= "button" value = "session clear" />
<入力型= "ボタン"値= "ローカルセーブ" />
<入力型= "button" value = "local read" />
<入力型= "button" value = "localclear" />
</div>
</body>
</html>