HTML5 localStorage와 sessionStorage의 차이점-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 localStorage와 sessionStorage의 차이점

jacklove

Jun 09, 2018 pm 01:51 PM

html5 localstorage

HTML5는 localStorage와 sessionStorage라는 두 가지 웹 저장 방법을 제공합니다.

localStorage와 sessionStorage의 차이점

localStorage는 삭제되거나 제거되지 않는 한 만료 시간이 없습니다.

sessionStorage는 세션에 대한 데이터를 저장합니다. 수명 주기는 사용자가 브라우저를 닫으면 데이터가 삭제됩니다.

기능:

1. localStorage의 기본 지원 용량은 1스테이션 5M입니다. 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] = 값 쓰기 방법은 주류 브라우저에서 지원되며 공식에서는 어떤 쓰기 방법이 표준인지 명시하지 않았습니다. 하지만 다음 코드를 실행하면 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 중국어 웹사이트를 참고하세요.