localStorage:没有时间限制的数据存储,在同一个浏览器中,只要没被手动清理,第二天、第二周或下一年之后,数据依然可用。
sessionStorage:针对一个 session 的数据存储,针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除(而且只在当前窗口有效)。
下面是关于这2者的使用方式:
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h2>在客户端存储数据</h2>
<p>HTML5 提供了两种在客户端存储数据的新方法:</p>
<ul>
<li>localStorage:没有时间限制的数据存储</li>
<li>sessionStorage:针对一个 session 的数据存储</li>
</ul>
<br>
<h2>localStorage的使用:</h2>
<p>localStorage存储的数据没有时间限制。在同一个浏览器中,只要没被手动清理,第二天、第二周或下一年之后,数据依然可用。</p>
<p>
例子:你在本机使用本浏览器第 <span id="visitCount" class="highlight"></span> 次浏览本页面。
</p>
<h2>sessionStorage的使用:</h2>
<p>sessionStorage针对一个 session
进行数据存储。当用户关闭浏览器窗口后,数据会被删除(而且只在当前窗口有效)。</p>
<p>
例子:你在本次打开此窗口后,第 <span id="visitCountPerSession" class="highlight"></span>
次浏览了本页面。
</p>
<a href="1.html">跳转到当前窗口的页面</a>
<a href="1.html" target="_blank">打开新标签页面</a>
</body>
<script>
$(function() {
recordVisitCount();
recordSessionCount();
console.log(localStorage);
//localStorage.clear();
// console.log(localStorage);
});
function recordVisitCount() {
if (localStorage.pagecount) {
localStorage.pagecount = Number(localStorage.pagecount) + 1;
} else {
localStorage.pagecount = 1;
}
$("#visitCount").html(localStorage.pagecount);
}
function recordSessionCount() {
if (sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
sessionStorage.pagecount = 1;
}
$("#visitCountPerSession").html(sessionStorage.pagecount);
}
</script>
</html>
在不同url下的效果
直接打开:
localhost:
127.0.0.1:
局域网ip:
从上面的效果图可以看出来,即使是访问同一个文件,url不同localstorage存放的值也不同。
然后是跳转的情况,跳转页面1.html与index.html没多少区别,只是script改成如下
<script type="text/javascript">
$("#visitCount").html(localStorage.pagecount);
$("#visitCountPerSession").html(sessionStorage.pagecount);
</script>
然后这是结果:
1:当前页面
2:这时点击跳转到当前窗口页面的结果:
3:这是关闭浏览器后重新打开的页面:
4.这时点击打开新标签页面的结果:
简单来说localstorage是针对一个应用(?),不管你跳没跳转,跳转到哪儿,这个值都是不会改变的,除非你手动更改。
sessionstorage是针对于某个应用的一次会话过程,在不关闭浏览器的情况下与localstorage相同,关闭后自动清除这个值。
对于sessionstorage的出现,个人感觉相当于又可以使用session这个东西了,所需要会话的值直接扔到sessionstorage里面,然后值就随意传了,也可以在后续进行修改
至于localstorage的出现,个人感觉这个东西就可以当做本地存储,比如存储一些用户的配置信息之类的。测试的时候试了一下,无论是360什么清除垃圾icooke,还是chrome
得清理所有垃圾,全部没用,你没看错,全部没用,这玩意就是完全清理不掉的,不知道这个机制是怎么回事。想清理只能手动调用localstorage.clear()才能清理掉,不知道是
什么情况。如果这个的设定就是这样,好的方面是存配置之类的不必再担心了,坏的方面是心邪的孩子完全可以存一些不好的东西,至于是什么就不明说了。不过localstorage有个
好处是独立存储的,哪怕是同一个页面只要url不同,访问的值就不同,所以不必担心别的应用会访问到这个值。具体的评价看个人见解了。