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);