H5缓存机制

hykeda4年前HTML5362

sessionStorage

<body>
#描述
sessionStorage的使用,存储数据到本地,存储的容量5mb左右
1.这个数据本质是存储在当前页面的内存中
2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/>
<input type="button" value="设置数据" id="setData"/>
<input type="button" value="获取数据" id="getData"/>
<input type="button" value="删除数据" id="removeData"/>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
  //获取用户名
  var name = document.querySelect("#userName").value;
  //存储数据
  window.sessionStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
  //如果找不到对应名称的key,那么就会获取null
  var name = window.sessionStorage.getItem("userName");
  alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
  //在删除的时候如果key值错误,不会报错,但是也不会删除数据
  window.sessionStorage.removeItem("userName1");
}
</script>
</body>

localStorage

<body>
#描述
localStorage的使用,存储数据到本地,存储的容量20mb左右
1.不同的浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据
2.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器关闭而清除,如果想清除,必须手动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/>
<input type="button" value="设置数据" id="setData"/>
<input type="button" value="获取数据" id="getData"/>
<input type="button" value="删除数据" id="removeData"/>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
  //获取用户名
  var name = document.querySelect("#userName").value;
  //存储数据
  window.localStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
  //如果找不到对应名称的key,那么就会获取null
  var name = window.localStorage.getItem("userName");
  alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
  //在删除的时候如果key值错误,不会报错,但是也不会删除数据
  window.localStorage.removeItem("userName1");
}
</script>
</body>


标签: H5缓存

相关文章

图片上传压缩

转载地址:https://yq.aliyun.com/articles/33569 移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API。但微...

flex 伸缩盒子

父元素 设置 display:flex,使父子元素变成了伸缩盒子。 flex-direction:控制子元素排列方向。     默认为水平排列:row,竖向排列:colu...

修改浏览器自动填充账号密码的样式

若在浏览器中记住密码,再次打开时,表单中自动填充的文本框和下拉框都变成了黄色背景,影响界面美观,可以使用以下样式修正: 1 2 3 4 5 6 7 8 9...

关于直播推流、拉流、相关协议的理解

关于直播推流、拉流、相关协议的理解

1. 推拉流:什么是推流推流,指的是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号传到网络的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观众观看直播时就会发生...

移动端预览pdf插件

https://npmmirror.com/package/pdfh5/v/1.0.4...

触屏版页面,小细节处理总结

取消input在ios下,输入的时候英文首字母的默认大写 <input autocapitalize="off" autocorrect="off" /> input框默认调...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。