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. 使用socket实现聊天功能

    public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSocket=null ...

  2. spring02IOC

    1.创建所需要的Student 和 Grade实体类 public class Student { //学生实体类 private String name; //姓名 private Integer ...

  3. ReSharper warning: Virtual member call in a constructor

    1.构造函数的执行顺序是:基类--->派生类 2.如果虚方法被重写后,由于基类中调用了虚方法,此时调用的是最外层的被重写后的虚方法,此时可能会发生异常 举例: class Parent { pu ...

  4. php捕获异常的处理

    try {            $result = *} catch (Exception $e) {            $result = $e; } 如果try里面报异常,$result = ...

  5. 启动android程序报错

    提示错误如下: The connection to adb is down, and a severe error has occured. [2010-03-11 09:36:56 - HelloO ...

  6. new Option()——实现时间联动

    //1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); m ...

  7. react-redux源码解析

    有理解不对的地方,欢迎大家指正!!! react为什么需要redux辅助???react是view层的单向数据流框架,数据需要一层一层往子组件传递(子组件并不会自动继承).子组件需要操作父组件的数据时 ...

  8. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  9. angular2 环境配置

    看到angular发布正式版,心动不已准备测试下. 看着官网教程,使用了cli创建项目,在命令行中键入: 安装cli npm install -g angular-cli 如果安装过以前的版本,请执行 ...

  10. Css3做的旋转显示文字和角度的变化

    Css: .spinner{ width:245px; height:245px; position:relative;}.coly{ border-radius:130px; font-size:1 ...