在html5标准之前，web存储信息需要cookie来完成，但是cookie不适合大量数据存储。因为需要等待服务器响应，所以速度慢/效率低。

本地存储的特点：

  • localstorage是仅存储在用户的硬盘上并等待用户读取数据，而cookie是在服务器上读取，由于宽带和设备的限制，cookie效率低。
  • local storage仅供客户端使用，如果要服务器端根据存储数值作出反应，就应该使用cookie，但是可以使用存储在本地的数据配合ajax技术和服务器异步通信。
  • 读取local storage不会使用网略宽带，但使用cookie将会发送到服务器，影响到网络宽带，增加成本。
  • local storage可存储5MB的数据，cookie最多4KB.

两种客户端存储函数

  1. sessionStorage： 针对一个session（会话）的数据存储，也称为会话存储。用户会话的持续时间只限定在用户打开浏览器窗口的时间，一旦关闭浏览器窗口，用户会话就会结束。so sessionStorage只能存储临时的信息。
  2. localStorage： 没有时间限制的数据存储。本地存储将在用户计算机上永久保存数据信息。

html5的web存储的更多相关文章

  1. HTML5中Web存储

    HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...

  2. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

  3. HTML5 总结-Web存储-7

    HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...

  4. 【我的前端自学之路】【HTML5】web 存储

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...

  5. html5的web存储详解

    以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...

  6. Html5的Web存储和WebSql

    HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用 ...

  7. HTML5的web 存储localStorage、sessionStorage

    说明 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...

  8. HTML5新增web存储方式

    客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ...

  9. html5的web存储与cookie的区别

    以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影 ...

随机推荐

  1. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  2. LoopBar – Tap酒吧与无限滚动

    相约 LoopBar – 标签栏与无限滚动为Android由Cleveroad 在Cleveroad我们最近认识到通过使用任何一个应用程序类别的导航,导航面板是很无聊和琐碎.这就是为什么我们的设计师的 ...

  3. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  4. 【webpack】-- 自动刷新

    前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们 ...

  5. python 写的几道题

    ''' #乘法口诀''' for i in range(1,10): for j in range(1,i+1): print("%d*%d=%2d" % (i,j,i*j),en ...

  6. Ext Js Sencha Cmd 命令 打包charts

    先进入charts包的目录下 cd D:\开发文档API\ext--gpl\packages\charts 在执行打包命令 sencha package build

  7. MySQL执行语句的顺序

    MySQL的语句一共分为11步,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入,只是这些虚拟的表对用户来说是透明的,但是只有 ...

  8. chrome 远程调试相关问题

    1.使用chrome remote debug时打开inspect时出现一片空白 2.如何不用FQ可以享受Chrome for android的远程调试功能 3.chrome://appcache-i ...

  9. pushpin Server-sent events &amp;&amp; openresty 集成试用

    前边有写过一个简单pushpin 集成stream 的demo,这次测试下sse 的功能 备注: 环境依然使用的是docker-compose运行 环境准备 docker-compose 文件 ver ...

  10. Zookeeper学习之路 （一）初识

    本文引用自 http://www.cnblogs.com/sunddenly/p/4033574.html 引言 Hadoop 集群当中 N 多的配置信息如何做到全局一致并且单点修改迅速响应到整个集群 ...