h5中的存储方式
之前的浏览器限制站点可以在用户计算机上存储的cookie的数量,为了破解这一限制,h5通过js的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让js更加有效率。支持两种方式。
首先检测浏览器是否支持本地存储
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
</head>
<body>
<div id="result"></div>
<script>
if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
</script>
</body>
</html>
(1)永久性的本地存储(localStoreage)
本地存储没有时间限制:
用法:
1.点(.)运算符 localStorage.lastname = 'zhuxiaosha';
2.方括号(【】)运算符
localStorage['lastname'] = 'zhuxiaosha';
3.localStorage.setItem
localStorage.setItem("lastname", "zhuxiaosha");
(2)会话级别的本地存储(sessionStorage)
用户关闭浏览器窗口后,数据就会被清除掉
用法:
1.点(.)运算符
sessionStorage.lastname = 'zhuxiaosha';
2.方括号(【】)运算符
sessionStorage['lastname'] = 'zhuxiaosha';
3.sessionStorage.setItem
sessionStorage.setItem("lastname", "zhuxiaosha");