HTML5中的localStorage与sessionStorage简单介绍

HTML 5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来
传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML 5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的
情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML 5 使用 JavaScript 来存储和访问数据。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
如何创建和访问 localStorage:
实例 :
<script type="text/javascript"> 
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
亲自试一试吧,代码如下:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
</body>
</html>
下面的例子对用户访问页面的次数进行计数:
实例
<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>
亲自试一试吧,代码如下:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
</body>
</html>
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
如何创建并访问一个 sessionStorage:
实例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
亲自试一试吧,代码如下:
<!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>
下面的例子对用户在当前 session 中访问页面的次数进行计数:
实例
<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>
亲自试一试吧,代码如下:
<!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>

时间: 2024-10-06 00:29:08

HTML5中的localStorage与sessionStorage简单介绍的相关文章

cookie 与html5 中的localstorage 与sessionstorage的异同

Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用 域,不可以跨域调用. Web Storage拥有setItem,getItem,removeItem,clear等方法,操作简单 不像cookie需要前端开发者自己封装setCookie,getCookie. Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 而Web Storage仅仅是为了在本地"存储"数据而生 local

HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间.session对象可以用来保存在这段时间内所要求保存的任何数据. localStorage: 将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

最近在项目中进行hybrid app开发,项目中有大量的js代码运行在android设备上.使用到了很多HTML5的新特性,之前没有遇到过,不了解,这里记录下增加点前端的知识.混合式app开发中,经常需要使用缓存功能,比如你在页面表单控件上输入了数据,你希望下次退出app再次进来的时候还能看到这些数据:比如你的项目中有保存草稿的功能,只是先将数据临时存储在本地,以后再提及到服务器.这就需要我们将数据持久地存储在本地,这就需要用到HTML5中的本地化存储解决方案.本文主要介绍下sessionSto

HTML5本地存储localStorage、sessionStorage及IE专属UserData

By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手.localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这

[0]-JavaScript中的localStorage和sessionStorage

l  内容目录 简介 Storages的使用 Storages VS Cookie 最后 l  简介 文中代码建议在Chrome/360Chrome下执行. HTML5中新增加了localStorage和sessionStorage,两者都是window的对象,可以通过window.localStorage/window.sessionStorage访问,用于保存数据,只是保存的范围略有不同. 下文中的Storage表示window.localStorage和window.sessionStor

HTML5本地存储-localStorage和sessionStorage

HTML5WebStorage本地存储 WebStorage是用来实现客户端存储数据,大家都知道之前的Cookie就是客户端存储的一种方式,今天看一看html5新增的本地存储方式:localStorage和sessionStorage. localStorage:存储的数据会一直存在本地客户端,即使浏览器关闭了也会存在: sessionStorage: 只是针对同一个 session 的数据存储,打开一个新来浏览器窗口或者窗口一旦关闭数据就没了.  既然知道了这两种新的本地存储方式,那怎么用那?