H5新特性之sessionStorage

最新推荐文章于 2024-09-09 13:10:14 发布

weixin_43727391

最新推荐文章于 2024-09-09 13:10:14 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

文章标签： h5sessionstarage

本文链接：https://blog.youkuaiyun.com/weixin_43727391/article/details/84197120

本文详细介绍了SessionStorage的使用方法，包括存储、获取和删除数据的操作，以及其生命周期特点。通过实例展示了如何在网页中利用SessionStorage进行临时数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sessinStorage的使用：存储数据到本地。存储的容量5mb左右。
		这个数据本质是存储在当前页面的内容中
		2.他的生命周期为关闭当前页面，会自动清除
		页面关闭就没了
		setItem(key,value):存储数据，以键值对的方式存储
		getITem(key):获取数据，通过指定名称的key获取对应的value值
		removaItem(key):删除数据，通过指定名称key删除对应的值
		clear():清空所有存储的内容<br>
		<input type="text" id="userName"/><br>
		<input type="button" value="设置数据" id="setData"/>
		<input type="button" value="获取数据" id="getData"/>
		<input type="button" value="删除数据" id="removeData"/>
		<script type="text/javascript">
			document.querySelector("#setData").onclick=function(){
				/*获取用户名数据*/
				var name=document.querySelector("#userName").value;
				/*存储数据*/
				window.sessionStorage.se tItem("userName",name);
			};
			document.querySelector("#getData").onclick=function(){
				/*如果找不到对应的key，就会获取null*/
				var name=window.sessionStorage.getItem("userName");
				alert(name);
			};
			/*在删除的时候如果key值错误，不会报错，也不会删除数据
			 */
			document.querySelector("#removeData").onclick=function(){
				window.sessionStorage.removeItem("userName");
			};
		</script>