H5 本地缓存localStorage缓存机制

localStorage缓存特点:
1.用户如果不进行清理操作,那么缓存一直在
2.缓存文件默认浏览器最大5M
3.可以存文本,图片,视频流

<!DOCTYPE html>
<html>
<body>
 
<div id="result"></div>
 
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
</script>
 
</body>
</html>

小技巧
判断是否缓存了

if(localStorage.getItem("lastname")){
    console.log("YES");
}

chrome浏览器查看缓存情况

html5localStorage缓存即使你关闭了浏览器,明天再来,都一直在。

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


This entry was posted in WEB前端 and tagged , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/h5-localstorage-cache-1/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

  

About Me

静水流深,水滴石穿