sessionStorage と localStorage の違いは次のとおりです: 1. localStorage には有効期限がありません。2. sessionStorage にはセッションのデータが保存され、ライフサイクルはユーザーがブラウザを閉じると削除されます。 。
sessionStorage と localStorage の違い
ご存知のとおり、HTML 5 標準の登場以来、ローカライズされたストレージが人気の検索キーワードになりました。 HTML 5 の初めには、ローカル ストレージには 2 つの方法がありました。1 つは Web ストレージで、もう 1 つは Web SQL でした。 Web SQL の実装は SQLite に基づいているため、DataBase の方向に傾いており、W3C は 2011 年 11 月に Web SQL 仕様を維持しないことを正式に発表したため、その API インターフェイスは現在その範囲に含まれていません。 HTML5の。したがって、私たちがよく話題にする HTML 5 ローカル ストレージは、現在では主に Web ストレージを指します。
以下は、WebStorage とその 2 つの形式の詳細な説明です。
1. webStorage
webStorage は HTML5 で導入された重要な機能で、Cookie と同様にクライアント上にデータをローカルに保存できます。クッキーよりもはるかに強力です。 Cookie のサイズはわずか約 4Kb (ブラウザごとにサイズが異なります) であるのに対し、webStorage のサイズは 5MB です。その API によって提供されるメソッドは次のとおりです:
setItem(key, value) - データを保存し、キーと値のペアの形式で情報を保存します。
getItem(key) — データを取得し、キー値を渡して、対応する値を取得します。
removeItem(key)—単一のデータを削除し、キー値に基づいて対応する情報を削除します。
clear()—すべてのデータを削除します
key(index)—インデックスのキーを取得します
2. localStorage
localStorageのライフサイクルは永続的です。 localStorageを利用してデータを保存すると、ブラウザを閉じても、積極的にデータを削除しない限りデータは消えません。 localStorage には length 属性があり、データが何レコードあるかを確認できます。使い方は以下の通りです。
var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
}localStorage は sessionStorage よりもシンプルで、注意する点はそれほど多くありません。
3. sessionStorage
sessionStorage のライフサイクルはブラウザが閉じる前です。つまり、ブラウザ全体が閉じられるまで、データは常に存在します。 sessionStorage にも length 属性があり、基本的な判断や使い方は localStorage と同様です。以下の点に注意してください:
<1> ページを更新してもデータは消去されません
検証のために、index.html と text.html の 2 つの HTML ファイルを用意しました。 text.html については、その起源については後で詳しく説明します。 2 つの HTML コードは次のとおりです:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//显示数据
function shows() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</head>
<body>
<input type="button" value="Login" οnclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" οnclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>
</html>text.html ページは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var storage = window.sessionStorage;
alert(storage.getItem("name"));
</script>
</body>
</html>index.html ページを開いた結果は次のとおりです:
When表示ボタンをクリックすると、入力ボックスに「あなたの名前はnullです」と表示されます。この時点では、sessionStorageにはキー値「name」を持つデータは格納されていません。テキストに「Rick」と入力し、ログインボタンをクリックすると、入力ボックスがクリアされ、データが sessionStorage に保存されます。その後、表示ボタンをクリックすると、「あなたの名前は Rick」と表示されます。この時点で、ブラウザをクリックして Web ページを更新し、[表示] ボタンをクリックすると、入力ボックスにはまだ「あなたの名前は Rick です」と表示されます
現在のページで開かれているリンクのみがセッション ストレージ データにアクセスできます。
準備された text.html ページを覚えていますか? 次に、その役割を果たす番です。確認するために、上記の手順に従って text.html を開くと、結果は次のようになります。
この値は null であり、「name」の値を取得できないことがわかります。ここで、text.html ページを閉じ、index.html ページをクリックしてリンクを開きます。次の結果が表示されます:
したがって、現在のページで開かれたリンクが sessionStorage データにアクセスできることがわかります。内で。その後、他のいくつかのテストを行った結果、index.html から text.html ページを開いて、index.html を閉じ、text.html を更新すると、sessionStorage 内のデータにもアクセスできることがわかりました。 sessionStorage 内のデータは、index.html とそこから開いたすべてのページを閉じるか、ブラウザを直接閉じる場合にのみ削除できます。
window.open を使用してページを開き、localtion.href メソッドを変更すると、sessionStorage 内のデータを取得できます
上記の 2 つのメソッドはテストされており、実際にそのとおりです。興味のある学生は実際に結果をテストできます。 localStorage と sessionStorage の違いについては要約しません。
つまり、使用するときは上記の点に注意することで、使用時に多くの不必要な落とし穴を回避できます。
関連知識の詳細については、PHP 中国語 Web サイト をご覧ください。 ！
以上がsessionStorage と localStorage の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
