H5缓存机制

HTML5 hykeda 355℃ 0评论

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缓存机制

喜欢 (4)

您必须 登录 才能发表评论!