HTML5基础教程(十一)

html5的本地存储分为：localStorage和sessionStorage

html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据，之前存储数据都是用cookie来实现的。

1.Cookie的不足

cookie存储数据的不足：

1.存储数据大小有限，仅4KB，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高; 2.影响带宽;

2.HTML5的本地缓存

h5中web storage有两种存储方式:sessionStorage和localStorage。

sessionStorage：用于存储一次会话的数据，这些数据只有在同一个会话中的页面才能访问到，当会话结束后，数据也随之销毁，可以这样形容sessionStorage，是会话级别的数据存储。

localStorage：用于持久本地数据，除非主动删除，否则数据永远存在。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

实例：

localsession.html页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button onclick="saveDataInSession()">保存数据到session</button>
    <button onclick="saveDataInLocal()">保存数据到local</button>
</div>
<div>
    <a href="news.html">跳转到新页面</a>
</div>

<script>

    function saveDataInSession(){
        sessionStorage.setItem("school","成都理工大学");
    }

    function saveDataInLocal(){
        localStorage.setItem("username","zhangsan");
    }
</script>
</body>
</html>

news.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   let school =  sessionStorage.getItem("school");
   let username = localStorage.getItem("username");
   console.log("session里保存的值是："+school);
   console.log("local里保存的值是："+username);
</script>
</body>
</html>

分别点击两个按钮后跳转到news.html，控制台输出结果如下：

session里保存的值是：成都理工大学
local里保存的值是：zhangsan

关闭所有页面后，再次单独打开news.html，控制台输出结果如下：

session里保存的值是：null
local里保存的值是：zhangsan