HTML5のlocalStorageとsessionStorageの違いについて-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5のlocalStorageとsessionStorageの違いについて

jacklove

Jun 09, 2018 pm 01:51 PM

html5localstorage

HTML5 は、localStorage と sessionStorage という 2 つの Web ストレージメソッドを提供します

localStorage と sessionStorage の違いには、クリアまたは削除されない限り、データは保存されます。

sessionStorage はセッションのデータを保存します。ライフサイクルはユーザーがブラウザを閉じると削除されます。

機能:

1. localStorage のデフォルトでサポートされる容量は 1 ステーション

で、setItem の呼び出しが上限を超えると、QuotaExceededError 例外がトリガーされます。もちろん、一部のブラウザーは容量の上限の変更をサポートしていますが、他のブラウザーとの互換性を確保するには、5M の容量を使用するのが最善です。 2.localStorage はデータを

key-value

の形式で保存し、キーと値は文字列形式のみにすることができます。したがって、数値 1 は保存後、文字列 1 に変換されます。 3.localStorageには以下の書き込み方法と読み取り方法があります:

localStorage.name = &#39;fdipzone&#39;;
name = localStorage.name;
localStorage[&#39;name&#39;] = &#39;fdipzone&#39;;
name = localStorage[&#39;name&#39;];
localStorage.setItem(&#39;name&#39;, &#39;fdipzone&#39;);
name = localStorage.getItem(&#39;name&#39;);

localStorage[key] = valueの書き込み方法は主流のブラウザでサポートされており、公式はどの書き込み方法が標準であるかを明言していません。ただし、次のコードを実行すると、localStorage が無効になります。

localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;

したがって、書き込み、読み取り、削除、クリアを実装するには、setItem()、getItem()、removeItem()、clear()を使用することをお勧めします。

4.文字列以外のコンテンツを保存したい場合は、処理に JSON を使用することをお勧めします。データを書き込むときは

JSON.stringify

を使用して文字列に変換し、データを読み取るときは JSON.parse を使用して文字列を前の形式に変換します。例 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>
 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="removeBtn" value="remove name"> <input type="button" id="clearBtn" value="clear"> </p>
  <script type="text/javascript">
	var oStorage = window.localStorage;
	function $(id){
		return document.getElementById(id);
	}
	// 保存数据
	$(&#39;saveBtn&#39;).onclick = function(){
		oStorage.setItem(&#39;name&#39;, $(&#39;name&#39;).value);
		if($(&#39;gender1&#39;).checked==true){
			oStorage.setItem(&#39;gender&#39;, 1);
		}else if($(&#39;gender2&#39;).checked==true){
			oStorage.setItem(&#39;gender&#39;, 2);
		}
	}
	// 获取数据
	$(&#39;getBtn&#39;).onclick = function(){
		$(&#39;name&#39;).value = oStorage.getItem(&#39;name&#39;);
		if(oStorage.getItem(&#39;gender&#39;)==1){
			$(&#39;gender1&#39;).checked = true;
		}else if(oStorage.getItem(&#39;gender&#39;)==2){
			$(&#39;gender2&#39;).checked = true;
		}
	}
	// 删除数据name
	$(&#39;removeBtn&#39;).onclick = function(){
		oStorage.removeItem(&#39;name&#39;);
	}
	// 清空数据
	$(&#39;clearBtn&#39;).onclick = function(){
		oStorage.clear();
	}
  </script>
 </body>
</html>

例 2:

JSON.stringify と JSON.parse を使用してデータをカプセル化する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>
 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>
  <script type="text/javascript">
	var oStorage = window.localStorage;
	function $(id){
		return document.getElementById(id);
	}
	// 保存数据
	$(&#39;saveBtn&#39;).onclick = function(){
		var name = $(&#39;name&#39;).value;
		var gender;
		if($(&#39;gender1&#39;).checked==true){
			gender = 1;
		}else if($(&#39;gender2&#39;).checked==true){
			gender = 2;
		}
		var data = {};
		data[&#39;name&#39;] = name;
		data[&#39;gender&#39;] = gender;
		oStorage.setItem(&#39;data&#39;, JSON.stringify(data));
	}
	// 获取数据
	$(&#39;getBtn&#39;).onclick = function(){
		var data = JSON.parse(oStorage.getItem(&#39;data&#39;));
		if(data){
			var name = data[&#39;name&#39;];
			var gender = data[&#39;gender&#39;];
			$(&#39;name&#39;).value = name;
			if(gender==1){
				$(&#39;gender1&#39;).checked = true;
			}else if(gender==2){
				$(&#39;gender2&#39;).checked = true;
			}
		}
	}
	// 清空数据
	$(&#39;clearBtn&#39;).onclick = function(){
		oStorage.clear();
	}
  </script>
 </body>
</html>

localStorage の値をリッスンして同期する変更時にページデータを同期するsetItem()、removeItem()、clear() を呼び出すときに、これらのイベントをリッスンして、異なるページ間のデータ更新を容易にすることができます。

// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event){
	var status = {}
	status.key = event.key;
	status.oldValue = event.oldValue;
	status.newValue = event.newValue;
	status.url = event.url;
	status.storage = event.storageArea;
	// 执行同步数据处理...
}

この記事では、HTML5 localStorage と sessionStorage の違いについて説明します。その他の関連コンテンツについては、php 中国語 Web サイトを参照してください。

関連する推奨事項:

PHP zipファイルのコンテンツ比較クラスの説明

PHPを介してユーザーアクセスページの言語クラスを取得/設定する方法

2つの計算PHP経由ファイル間の相対パス方式

以上がHTML5のlocalStorageとsessionStorageの違いについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。

H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PM

H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

メモ帳++7.3.1

使いやすく無料のコードエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。