前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5-web存储

H5-web存储

作者头像
kdyonly
发布2023-03-03 19:31:22
1920
发布2023-03-03 19:31:22
举报
文章被收录于专栏:个人编程笔记个人编程笔记

浏览量 1

首先我们来思考几个问题: 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的使用:

代码语言:javascript
复制
<!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>

运行的结果:

查看storage

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

sessionStorage

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

代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • localStorage
  • 查看storage
  • sessionStorage
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档