sessionStorage的理解和使用_sessionstorage 的作用范围是基于同一源(origin)

作者：花生_TL007 | 2024-03-02 03:42:56

踩

sessionstorage 的作用范围是基于同一源(origin)

Web Storage 包含如下两种机制：

sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

这两种机制是通过 Window.sessionStorage 和 Window.localStorage 属性使用（更确切的说，在支持的浏览器中 Window 对象实现了 WindowLocalStorage和 WindowSessionStorage 对象并挂在其 localStorage 和 sessionStorage 属性下）—— 调用其中任一对象会创建 Storage 对象，通过 Storage 对象，可以设置、获取和移除数据项。对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage 对象——独立运行和控制。

语法


// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
 
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
 
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
 
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

返回一个storage对象


<div>
			<input type="text" name="" id="field" value="" />
			<button id="deleted">deleted</button>
			<button id="clear">clear</button>
		</div>
		<script type="text/javascript">
			var clear = document.getElementById("clear");
			var deleted = document.getElementById("deleted");
			var field =document.getElementById("field");
			if (sessionStorage.getItem("autoSave")) {
				field.value = sessionStorage.getItem("autoSave");
			}
			field.addEventListener("change", function() {
			  	// 保存结果到 sessionStorage 对象中
			  	//写两个为了后面对于删除和清除的区别
			  	sessionStorage.setItem("autosave", field.value);
			  	sessionStorage.setItem("autosave1", field.value);
			});
			clear.οnclick=function(){
				sessionStorage.clear();
			};
			deleted.οnclick=function(){
				sessionStorage.removeItem("autosave");
			};
		</script>

注意点：

1、页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；

2、 sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；

3、大小不超过5M；

4、不自动发送数据到服务器；

5、使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】