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. 配置HP LaserJet M1536dnf MFP打印机通过TCPIP共享多台计算机

    HP LaserJet M1536dnf MFP打印机通过TCPIP共享多台计算机配置配置过程:1.确保网线插入到打印机后,点设置按钮,到网络配置中查看IP地址,确保与主机或者路由器的IP地址一致,设 ...

  2. ZOJ3161

    朴素动态规划 ZOJ3161 题意:(严重标题党)老板不想让客人走,客人不想留,客人按顺序排好,老板抽8g(书上翻译成八卦,神翻译),抽到的 如果相邻,其中一个人由客人决定离开,求最后黑心的老板最多能 ...

  3. bootstrap初探

    bootstrap资源 http://getbootstrap.com http://github.com/twbs http://www.bootcss.com bootstrap栅格系统 容器:流 ...

  4. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  5. javascript实现silverlight pivotViewer控件

    一时无事,就用js实现了一个silverlight pivotViewer控件来练手. 实现效果: silverlight PivotViewer说明地址:https://msdn.microsoft ...

  6. 设计模式:模版模式(Template Pattern)

    android中的Activity框架,View框架中大量的on函数基本上都应用到了Template模式,掌握这一模式对于理解这些框架大有裨益. 模版模式 又叫模板方法模式,在一个方法中定义一个算法的 ...

  7. 搭建Struts2开发环境

    搭建Struts2环境时,我们一般需要做以下几个步骤的工作: 1.创建javaweb工程 2.找到开发Struts2应用需要使用到的jar文件 3.创建jsp文件 4.创建action文件 5.编写S ...

  8. python的hashlib模块

    # -*- coding: utf-8 -*- """python 的MD5 sha1 模块""" import hashlib #md5的 ...

  9. C++ 约瑟夫环

    约瑟夫环: 已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数,数到m的那个人又出列:依此规律重复下去,直到圆桌周 ...

  10. tomcat加入系统服务

    在实际的项目开发中web容器等都是安装在客户方的服务器上的,在实现tomcat的集群时为了实现防止客户重启的机器造成服务器的关闭因此需要将web容器加入到系统服务中,在系统启动的时候自动启动服务,以t ...