发表于 2018-10-22 11:36:21 by 月小升
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> |
<!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");
} |
if(localStorage.getItem("lastname")){
console.log("YES");
}
chrome浏览器查看缓存情况

html5的localStorage缓存即使你关闭了浏览器,明天再来,都一直在。
<!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> |
<!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
html5,
localStorage. Bookmark the
permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:
月小升博客 –
https://java-er.com/blog/h5-localstorage-cache-1/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力.