美文网首页
HTML 5 Web 存储

HTML 5 Web 存储

作者: Devour_z | 来源:发表于2017-07-10 22:00 被阅读0次

HTML5 提供了两种在客户端存储数据的新方法:
-localStorage - 没有时间限制的数据存储
-sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法
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>

用户访问页面的次数进行计数

sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
   {
   sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
   }
else
   {
   sessionStorage.pagecount=1;
   }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>

</body>
</html>

用户在当前 session 中访问页面的次数进行计数

cookie 和session 的区别:##

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。

4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议:
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留,可以放在COOKIE中

cookie 和session 的联系:##

1、session是通过cookie来工作的
2、session和cookie之间是通过$_COOKIE['PHPSESSID']来联系的,通过$_COOKIE['PHPSESSID']可以知道session的id,从而获取到其他的信息。
3、在购物网站中通常将用户加入购物车的商品联通session_id记录到数据库中,当用户再次访问是,通过sessionid就可以查找到用户上次加入购物车的商品。因为sessionid是唯一的,记录到数据库中就可以根据这个查找了

相关文章

  • HTML5存储

    HTML5学习笔记 Web存储 HTML5 web存储,一个比cookie更好的本地存储方式。 什么是html5 ...

  • web本地存储

    HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 W...

  • web本地存储

    HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 W...

  • HTML5 Web存储

    HTML5 Web存储,一个比cookie更好用的方法 什么是 HTML5 Web 存储? 使用HTML5可以在本...

  • webSQL

    HTML5 Web 存储 HTML5 应用程序缓存HTML5 Web SQL 数据库Web SQL 数据库 API...

  • localStorage和sessionStorage

    HTML5 Web存储包括localStorage和sessionStorage,HTML5 Web是以键值对的形...

  • HTML5 Web储存

    HTML5 Web存储,一个比cookie更好的本地储存方式 HTML5 Web储存:使用HTML5可以在本地储存...

  • 常见的本地存储方式之localStroage、sessionSt

    HTML5 提供了两种在客户端存储数据的新方(HTML 5 Web 存储): localStorage - 没有时...

  • HTML 5 Web 存储

    HTML5 提供了两种在客户端存储数据的新方法:-localStorage - 没有时间限制的数据存储-sessi...

  • HTML 5 Web 存储

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数...

网友评论

      本文标题:HTML 5 Web 存储

      本文链接:https://www.haomeiwen.com/subject/wswuhxtx.html