浏览器本地存储对象

最新推荐文章于 2023-09-16 09:17:09 发布

俞泰鑫

最新推荐文章于 2023-09-16 09:17:09 发布

阅读量947

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/god_yutaixin/article/details/104004309

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本地存储对象

网页在浏览器中执行时，自动给我们提供大小为5M的空间，可以存储字符串等(像数据库一样存储数据)
提供了sessionStorage(会话存储)和localStorage(本地存储)两个存储对象来对网页的数据进行添加删除修改查询操作

localStorage用于长久保存某个网站的数据，保存的数据没有过期时间，直到手动去除
sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

对象属性

length:返回存储对象中包含多少条数据

对象方法

key(n):返回存储对象中第n个键的名称
getltem(keyname)：返回指定键的值
setltem(keyname,value)：添加键和值，如果对应的值存在，则更新该键对应的值
removeItem(keyname)：移除键
clear()：清除存储对象中所有的键

示例

<head>
	<!-- 导入jquery文件-->
	<script src="js/jquery.min.js"></script>
</head>

<body>
	<!-- 添加按钮，向localStorage中保存和读取输入的值 -->
	<div>
		<input type="text" id="num">
		
		<!-- 下拉列表 -->
		<select name="num2" id="num2">
			<option value="1">小学</option>
			<option value="2">中学</option>
			<option value="3">大学</option>
		</select>
		
		<button id="btn">保存</button>
		<button id="btn2">读取</button>
	</div>

	<script>
		// 获取标签
		var $num=$("#num");
		var $num2 = $(#"num");
		var $btn=$("#btn");
		var $btn2 = $("btn2");

		//向本地存储对象中保存数据
		$btn.on("click",function(){
			// 控制台输出 
			console.log($num.val(),$num2.val())
		
			// 定义一个js类字典对象,并向类字典对象中添加元素 
			var obj = {}
				obj.a = $num.val();
				obj.b = $num2.val();
			console.log(obj)	<!-- {a:"xxx",b:"xxx"} -->
			// 调用loacalStorage本地存储对象保存起来，保存的控制对象在控制面板的applications下面查看 
   			localStorage.setItem("键",JSON.stringify(obj));	// 需要将obj对象转成json字符串才能在localStorage显示		
   				})

		//从本地存储对象中提取数据
		$btn2.on("click",function(){
			//调用本地存储对象显示保存的内容 
			var temp = localStorage.getItem("键")
			
			// 将保存的内容(json串)先解析转为js对象，并在控制台显示出来
			var obj = JSON.parse(temp);
			console.log(obj.a,obj.b);
			})
	</script>
</body>

俞泰鑫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器本地存储对象

本地存储对象网页在浏览器中执行时，自动给我们提供大小为5M的空间，可以存储字符串等(像数据库一样存储数据)提供了sessionStorage(会话存储)和localStorage(本地存储)两个存储对象来对网页的数据进行添加删除修改查询操作localStorage用于长久保存某个网站的数据，保存的数据没有过期时间，直到手动去除sessionStorage用于临时保存同一窗口(或标签页)的...
复制链接

扫一扫