【14】web存储

最新推荐文章于 2022-02-08 16:17:50 发布

业余&玩家

最新推荐文章于 2022-02-08 16:17:50 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/qq_28401309/article/details/86579607

版权

首先我们来思考几个问题：
1.什么是web存储？
2.h5引入web存储的原因？
3.web存储的方式有哪些？
使用html5在本地存储用户的浏览数据，之前采用的cookie的形式，但是cookie存储的数据量少而且效率底，进而引入了web存储，客户端存储数据的方式有两种：localStorage，永久性存储，除非自己删除，sessionStorage，关闭浏览器之后就会清空。

localStorage

常用的可使用的api：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

几个api的使用：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
    localStorage.sitename="测试";
    localStorage.setItem("test","测试");
    var res=localStorage.getItem('test');
    document.getElementById("result").innerHTML=res;
    localStorage.removeItem("test");
    //localStorage.clear();
    document.getElementById("result").innerHTML+="<br/>"+localStorage.key(2);
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>
</body>
</html>

运行的结果：

2017-08-07_214611.jpg

查看storage

chorme浏览器下打开开发工具（F12），找到application，然后选择它就可以看到storage，你可以在这里进行数据的清除。

2017-08-07_214828.jpg

sessionStorage

关于sessionStorage和localStorage使用api是相同的，只不过它是临时存储，关闭浏览器就会自动清除。
计数的例子：

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else{
    sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script> 
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>