在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

浏览器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储。

localStorage 和 sessionStorage

There are two new objects for storing data on the client:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

实例

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

sessionStorage 对象

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

如何创建并访问一个 sessionStorage:

实例

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

HTML 客户端存储的更多相关文章

  1. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  2. js023-离线应用与客户端存储

    js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...

  3. js-新兴的API,最佳实践,离线应用于客户端存储

    离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...

  4. Web - 客户端存储的几种方式

    客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...

  5. 《javascript高级程序设计》 第23章 离线应用与客户端存储

    23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB   23.1 离线检 ...

  6. HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  7. 客户端存储 API

    介绍两个在客户端存储数据的 API localStorage与sessionStorage 两个都是window对象的属性,利用这两个属性,可以在客户端存储一些数据 相比cookie,这种存储方式的优 ...

  8. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  9. 动画优化、客户端存储、历史记录、worker

    一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...

  10. 离线应用与客户端存储(cookie storage indexedDB)

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

随机推荐

  1. TCP内核参数

    tcp_syn_retries :INTEGER默认值是5对于一个新建连接,内核要发送多少个 SYN 连接请求才决定放弃.不应该大于255,默认值是5,对应于180秒左右时间.(对于大负载而物理通信良 ...

  2. iOS学习笔记20-地图(二)MapKit框架

    一.地图开发介绍 从iOS6.0开始地图数据不再由谷歌驱动,而是改用自家地图,当然在国内它的数据是由高德地图提供的. 在iOS中进行地图开发主要有三种方式: 利用MapKit框架进行地图开发,利用这种 ...

  3. Scala基础知识[一]

    摘要:在Scala 是 Scalable Language 的简写,是一门多范式(multi-paradigm)的编程语言.设计初衷是要集成面向对象编程和函数式编程的各种特性.Scala 运行在Jav ...

  4. HDU——2112HDU Today(SPFA+简单Hash或map+前向星)

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. 算法复习——欧拉回路混合图(bzoj2095二分+网络流)

    题目: Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛可以到另外任意一个小岛.现在YYD想骑单车 ...

  6. P1651 塔 (动态规划)

    题目描述 小明很喜欢摆积木,现在他正在玩的积木是由N个木块组成的,他想用这些木块搭出两座高度相同的塔,一座塔的高度是搭建它的所有木块的高度和,并且一座塔至少要用一个木块.每个木块只能用一次,也可以不用 ...

  7. leetcode 376

    利用贪心思想,每次都得到到当前数最长的长度,和与当前数链接的前一个数之间差的符号 class Solution { public: int wiggleMaxLength(vector<int& ...

  8. MATLAB(1)

    前言 之前经常用MATLAB,却不小心停留在了舒适区,连基本的调试方法都没有掌握.本文主要是对MATLAB程序调试中的一般方法进行总结,也是自己学习的记录.全文大致分为三个段落: 1)代码内调试: 2 ...

  9. linux 抓取访问量排行

    需求: 分析图片服务日志,把日志(每个图片访问次数*图片大小的总和)排行,取top10,也就是计算每个url的总访问大小 语句: awk '{a[$1]+=$10;}END{for(i in a){p ...

  10. Codeforces Gym 100418K Cards 组合数学

    CardsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action? ...