js--web Storage

最新推荐文章于 2024-03-06 14:24:01 发布

Zxiaoling

最新推荐文章于 2024-03-06 14:24:01 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Zxiaoling/article/details/79667745

版权

storage接口用于在浏览器客户端中存储用户自定义的信息。

storage的存储形式：

1.localStorage:永久的存储在浏览器中，但是要注意，在不同的浏览器中数据是不能共享的。

2.SessionStorage:当前页面回话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。

3.GlobalStorage:HTML 5中被localStorage代替。

为了能访问到同一个localStorage对象，页面必须自同一个域名，使用同一种协议，在同t一个端口上。

这里重点介绍localStorage的相关用法。

localStorage提供的一些方法:

1.localStorage.setItem(key,value):用于将key-value键值对的方式插入localStorage中。

2.localStorage.getItem(key）：读取key的localStorage字符串值。

3.localStorage.removeItem(key）：删除localStorage的key。

4.localStorage.clear(）：清空localStorage所有的key。

5.遍历localStorage存储的key

.key（）：在指定的数字位置获取该位置的名字。

.length:获取localStorage中保存的键值对的数量。

注意：在.localStorage中只能存储字符串类型的数据。

存储输数据的方法如下：

<html>
	<head>
		<meta charset="utf-8">	
		<title>CODING COFFEE</title>
	</head>
	<body>
		<script type="text/javascript">
		localStorage.setItem('name','Bizzbee');
		
		localStorage.username = "bizzbee";
		console.log(localStorage);
		console.log(localStorage.getItem('username'));
		console.log(localStorage.name);

		</script>
    </body>
</html>

运行的结果：

localStorage.username=“bizzbee”和localStorage.setItem("name","bizzbee")都是和h5本地存储的方法，第一个直接把值赋给name字段，第二个也是里面有两个参数，第一个是字段名，第二个是值，他和第一个的差别就在于他能动态存储数据。

通过for循环来展示两个的区别：

localStorage.username=“value”

<script type="text/javascript">
		for(var i=0;i<5;i++)
			{
			localStorage.i=i;
			}
		</script>

运行结果：

localStorage.setItem(key,value)

<html>
	<head>
		<meta charset="utf-8">	
		<title>CODING COFFEE</title>
	</head>
	<body>
		<script type="text/javascript">
		for(var i=0;i<5;i++)
{
localStorage.setItem(i,i);
}
		</script>
    </body>
</html>

运行结果：

从结果中就可以明显看到区别，有存储就肯定有获取，两种方法的获取方式分别是localStorage.username 和localStorage.getItem(key);

Zxiaoling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--web Storage

storage接口用于在浏览器客户端中存储用户自定义的信息。storage的存储形式：1.localStorage:永久的存储在浏览器中，但是要注意，在不同的浏览器中数据是不能共享的。2.SessionStorage:当前页面回话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。3.GlobalStorage:HTML 5中被localStorage代替。为了能访问到同一个localStorag...
复制链接

扫一扫