COOKIES的限制和缺陷

  首先,让我们来回顾下 cookies。Cookies 的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷。Cookies 的优点在于,它可以允许我们在登陆网站时,记住我们输入的用户名和密码,这样在下一次登陆时就不需要再次输入了,达到自动登陆的效果。

  另一方面,cookie 的安全问题也日趋受到关注,比如 cookie 由于存储在客户端浏览器中,很容易受到黑客的窃取,安全机制并不是十分好。

  另外一个问题是 cookies 存储数据的能力有限。目前在很多浏览器中规定每个 cookie 只能存储不超过 4KB 的限制,这估计是来自

  1997 年 rfc2109 中的规定(http://tools.ietf.org/html/rfc2109)。目前的浏览器大多允许用户创建 30 到 50 个 cookies ,所以一旦 cookie 的内容超过4KB,唯一的方法是重新创建。

  此外,cookie 的一个缺陷是每次的HTTP请求中都必须附带cookie,这将有可能增加网络的负载。

  HTML5中的Web存储

  在 HTML5 中新出现的 Web 存储机制正好弥补了 cookies 的缺点,Web存储机制在以下两方面作了加强:

  首先,对于 web 开发者来说,它提供了很容易使用的 API 接口,通过设置键值对即可使用,下文中会有例子谈到。

  其次,在存储的容量方面,可以根据用户分配的磁盘配额进行存储,这就可以在每个用户域下存储不少于5-10MB的内容。这就意味者,用户可以不仅仅存储 session 了,还可以在客户端存储用户的设置偏好,本地化的数据,离线的数据,这对提高效率是很有帮助的。

  而web存储更提供了使用 Javascript 编程的接口,这将使得开发者可以使用 Javascript ,在客户端做很多以前要在服务端才能完成的工作。目前,各主流浏览器已经开始对 web 存储的支持,如下图:


  Session存储和本地化存储

  在 HTML5 的 web 存储中,分为 session 存储和本地化存储两类。

  sesssion 存储只能针对单一的浏览器进程或单一页面的数据,换句话说,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储

  而 localStorage 则是可以不受浏览器窗口进程的限制,只要使用 localStorage 保存了的数据,即使在新打开了浏览器窗口或者将浏览器关闭后,数据依然保存。网站在页面加载完毕后可以通过 Javascript 来获取这些数据。

  要注意的是,以上两类 web 存储机制,在不同类型的浏览器之中还是不能互相访问的,比如在 Firefox 中用 localstorage 存储的时候,是不能在IE中去访问读取的。

  何时去使用它们

  使用 localStorage 存储机制的场合是十分多的,比如你的应用中是一个在线的任务应用,需要用户在线填写大量的表单和数据,而且在指定的时间间隔后,才把这些数据发送到服务端,又或者是在线购物时,用户的购物车(这时可以在购物车中保存更多的数据了,等用户下次再登陆时,购物车中的数据依然是存在的)。又或者开发的离线应用,用户在离线状态下把数据填写好,等在线的时候,再一次性把数据提交。

  除此之外,更有研究表明,可以使用 localStorage 去存储图片等二进制数据(图片需要经过Base64编码),其效率大为提高,详见这篇文章。

  那么什么时候需要使用 sessionStorage 呢?在有些情况下,如果你需要当浏览器窗口关闭或者不需要数据在当用户新打开一个窗口依然能被访问的情况下,可以使用 sessionStorage。比如在运行某个游戏的两个实例或者在运行多个单元测试时,不希望数据之间有冲突,这时可以使用 sessionStorage。

弥补Web开发缺陷实战 HTML5 中存储API相关推荐

  1. 弥补Web开发缺陷 实战HTML 5中存储API

    COOKIES的限制和缺陷 首先,让我们来回顾下cookies.Cookies的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷.Cookies的优点在于,它可以允许我们在登陆网站时,记住我 ...

  2. 手把手教你写网站:Python WEB开发技术实战

    摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...

  3. html5在哪编辑器,HTML5文本编辑器推荐-属于Web开发人员的HTML5编辑器

    HTML5文本编辑器推荐-属于Web开发人员的HTML5编辑器 Web开发人员和设计人员经常需要用到HTML5文本编辑器,同时它也是Web开发人员最为重要的工具之一.由于HTML5技术的不断发展,为此 ...

  4. 张利国java pdf_Java Web开发与实战–Eclipse+Tomcat+Servlet+JSP整合应用 (刘伟张利国) PDF...

    资源名称:Java Web开发与实战–Eclipse+Tomcat+Servlet+JSP整合应用 (刘伟,张利国) PDF 第1章 web开发工具的安装与使用 第2章 web编程技术基础 第3章 s ...

  5. html5中api有什么,HTML5中的API概览

    HTML5中的API概览 整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...

  6. pythonweb开发-手把手教你写网站:Python WEB开发技术实战

    摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...

  7. python web-手把手教你写网站:Python WEB开发技术实战

    摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...

  8. python开发一个自己的技术网站_手把手教你写网站:Python WEB开发技术实战

    摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...

  9. html5移动web开发简答题,HTML5移动Web开发简单知识点介绍

    原标题:HTML5移动Web开发简单知识点介绍 1 :基于HTML5的移动Web应用 Canvas绘图:通过获取HTML中的Dom元素Canvas,调用其渲染上下文的Context对象,使用Js进行图 ...

最新文章

  1. java多线程——饥饿和公平
  2. 【转】OGRE资源相关分析
  3. 二叉树 —— 创建二叉树 先序遍历 、中序遍历、后序遍历(递归方式、非递归方式)
  4. 关于Linux 是怎么来的,该如何去学
  5. Python virtualenv激活与退出虚拟环境
  6. JavaScript对象与事件
  7. 前端学习(2901):javascript五大浏览器
  8. HDFS常用文件操作命令汇总
  9. 计算机图形学在线作业,电子科大16秋《计算机图形学》在线作业3答案
  10. (10)verilog语言编写SPI发送
  11. Asp.Net Mvc4分页,扩展HtmlHelper类
  12. 常见网络游戏的端口列表
  13. Java 下数据业务逻辑开发技术 JOOQ 和 SPL
  14. 电动汽车充电桩中的漏电保护应用分析 RCD的分类和选型
  15. HTTPS证书基本概述
  16. capture h5中_input type=file属性详解,利用capture调用手机摄像头
  17. 如何做一个基于JAVA房产中介预约看房系统毕业设计毕设作品(springboot框架)
  18. Google搜索引擎使用技巧大全
  19. 不谋正业的诗人:没有副业 诗人都得饿死
  20. 怎么对本地局域网计算机控制,如何远程控制他人电脑 局域网与互联网控制电脑的方法【详细介绍】...

热门文章

  1. React Router V6 新特性
  2. 7个有用的JavaScript技巧
  3. ES5和ES6类的知识
  4. 汉字笔顺口诀_一帮40后理工男编出新型字典,《笔顺码字典》在汉首发
  5. 计算机二级c语言编程题型,全国计算机等级二级C语言上机编程题题型
  6. mysql or 短路_MySQL是否使IF()函数短路?
  7. 评课用计算器计算机,《用计算器计算》教学反思
  8. oracle中md5加密解密_Oracle定义DES加密解密及MD5加密函数示例
  9. 笔记本电脑键盘失灵一键修复_笔记本部分按键失灵的键盘可以用了,省下键盘的钱...
  10. python将两个list类型的全排列转换为tuple类型