HTML5中增加了两种全新数据存储方式:Web Storage和Web SQL Database. 前者可用于临时或永久保存客户端的少量数据;后者是客户端本地化的一套数据库系统,可将大量数据保存在客户端,无需与服务端交互。极大的减轻了服务端的呀,加快了页面浏览的速度。
Web Storage分为会话数据长期数据,sessionStorage(保存会话数据),localStorage(在客户端长期保存数据)。可以将客户端数据分类型进行存储,使它在运用上优越于传统、单一的Cookie
 
sessionStorage:该数据实质上是被保存在session对象中。保存用户临时会话数据;一旦关闭浏览器,所有数据都会消失。sessionStorage.setItem(key,value); sessionStorage.getItem(key)
 
localStorage:该对象可将数据长期保存在客户端,即使是重新打开浏览器也不会丢失,如果要清除对象保存内容,需调用localStorage.removeItem(key)。localStorage.setItem(key,value); localStorage.getItem(key);
localStorage.clear()清楚全部的数据
 
cookies:将数据保存在用户的客户端,存在于用户硬盘文件上。其缺点是:限制保存数据空间大小、数据保密性差、代码操纵复制等。
 
sessionStorage、localStorage和cookie区别?
1.数据的有效性不同。sessionStorage仅在当前浏览器中有效,关闭浏览器数据消失。localStorage关闭浏览器也有效。cookie只在设置cookie过期时间内有效,无论浏览器是否关闭。
2.作用域不同。sessionStorage不在不同浏览器窗口中共享。localStorage在所有同源窗口中共享;cookie也是所有同源窗口中共享。
 
为什么选择Web Storage而不是Cookie?
web Storage的优势有:
1. 存储空间比cookie大
2. 存储内容不会发送到服务器。而cookie的内容会随着请求一并发送到服务器,这对于本地存储是一种宽带浪费。
3. 独立的存储空间。不会造成数据混乱。
4.更多丰富易用的接口,使数据操作更为简单

localStrorage、 sessionStorage 、cookie的更多相关文章

  1. cookie、sessionStorage、localStorage区别

    相同:不管sessionStorage localStorage 还是 cookie 都是存储用户数据的. 不同: 1.cookie的存储空间小, cookie的数据是会通过http请求带到服务器的( ...

  2. localStorage、sessionStorage、cookie、session

    localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...

  3. localStorage、sessionStorage和cookie的区别

    本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...

  4. cookie、sessionStorage、localStorage的区别?

    数据存储位置 三者都是存储在游览器本地的 区别在于cookie是服务器端写入的,而sessionStorage.localStorage是由前端写入的 生命周期 cookie的生命周期是由服务器端写入 ...

  5. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  6. cookies、sessionStorage、和localStorage的区别。

    为什么会有cookie和session? 我们都知道http是无状态的协议无连接的,客户每次在读取web页面时服务器都会打开新的会话.服务器不会自动维护客户上下文的信息,那么session就是一种保存 ...

  7. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  8. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  9. cookie、sessionStorage、localStorage

    转自--http://www.cnblogs.com/fly_dragon/p/3946012.html cookie Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的 ...

随机推荐

  1. 【翻译】A (very) short introduction to R R的简短介绍

    [前言] 本文翻译自Paul Torfs & Claudia Brauer的文章A (very) short introduction to R.其中比较简单的地方没有翻译,不好用中文描述的地 ...

  2. mongodb权威指南读书笔记

    一个服务器能不能运行多个不同端口的mongo实例? 如果两个对象不相等,hashcode一定不相等:如果两个对象相等,hashcode相等或者不相等? 修改器速度42页 update({},{&quo ...

  3. 如何使用CSS Sprites技术进行图片合并

    http://jingyan.baidu.com/article/066074d6757654c3c21cb02d.html

  4. Lesson 5: Typography in Product Design

    Lesson 5: Typography in Product Design Article 1: Interactive Guide to Blog Typography 布局(Layout) 用空 ...

  5. checking for oracle home incompatibilities failed

    安装Oracle软件的过程中,报错: 出错原因: 这个错误主要是oracle上一次安装失败,而没有删除干净而留下的目录文件造成. 解决办法: 清除原先目录下的文件,再retry或者重新安装即可. 示例 ...

  6. 监听tomcat服务器启动/关闭并从配置文件中读取参数进行初始化

    监听tomcat服务器启动/关闭很简单(2步): 1. 建立一个类实现ServletContextListener接口,重写其中的方法(contextDestroyed和contextInitiali ...

  7. Java导入证书失败Keystore was tampered with, or password was incorrect

    keytool 错误: java.io.IOException: Keystore was tampered with, or  password was incorrect   在进行证书相关操作, ...

  8. php curl 基本用法

    <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "http://www.baidu.com"); curl_se ...

  9. 关闭Centos的自动更新

    昨天跟老板汇报,提到我们的linux服务器每天自动更新,老板大发雷霆,说生产系统不能够这样,非常不安全,一个师兄也提到他原来在移动的时候,服务器更新也是很谨慎的事情.看来我的思维太技术了,不够全面,所 ...

  10. 微信支付开发+{ping++}微信支付托管

    ------------------------微信支付接口------------------------------- 微信支付开发并没有想象中的那么难,主要是微信提供了sdk. 微信公众号必须是 ...