http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/

http://book.51cto.com/art/201106/270499.htm

http://www.cnblogs.com/blackbird/archive/2012/06/18/2553718.html

软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程,一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现,web开发又有了两种选择:Web Storage和Web SQL Database.

Web Storage有两种形式:LocalStorage(本地存储)和sessionStorage(会话存储)。这两种方式都允许开发者使用js设置的键值对进行操作,在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

1.与cookie不同的是:Web Storage数据完全存储在客户端,不需要通过浏览器的请求将数据传给服务器,因此x相比cookie来说能够存储更多的数据,大概5M左右。

2.LocalStorage和sessionStorage功能上是一样的,但是存储持久时间不一样。

LocalStorage:浏览器关闭了数据仍然可以保存下来,并可用于所有同源(相同的域名、协议和端口)窗口(或标签页),

sessionStorage:数据存储在窗口对象中,窗口关闭后对应的窗口对象消失,存储的数据也会丢失。

注意:sessionStorage 都可以用localStorage 来代替,但需要记住的是,在窗口或者标签页关闭时,使用sessionStorage 存储的数据会丢失。

3、使用 local storage和session storage主要通过在js中操作这两个对象来实现,分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例,自然也具有Storage类的属性和方法。

Storage类的相关成员如下:

成员名 方法参数 描述
length 属性 获取存储数据的条数

key(n)    

n:索引值 根据索引值,返回键名
getItem(key) key:键名 根据键名,获取数据值
setItem(key,value) key:键名 value:键值 根据键名和键值设置数据项,如果键名已经存在,则覆盖值
removeItem(key) key:键名 根据键名删除一个数据项
clear() 无 清空当前的Storage对象

其用法:

参数设置很简单,如下例:

localStorage.setItem('age', 40);

访问一个存储的数据一样很容易:

= .getItem('age');

可以这样删除一个特定的键值对:

localStorage.removeItem('age');

或者删除所有的键值对:

localStorage.clear();

sessionStorage与页面
js 数据对象的区别:

sessionStorage只要是同源的同窗口(Tab)中,刷新页面或者进入不同的页面数据对象仍然被保存,也就是说只要浏览器窗口不关闭,加载页面(同源)或刷新页面,数据仍存在。

请描述一下 cookies,sessionStorage 和 localStorage 的区别?的更多相关文章

  1. 关于cookies,sessionStorage和localStorage的区别

    如果我说得啰嗦了,请麻烦提醒我一下~~ 面试的时候说: 首先这三个可以在浏览器端按下F12,在Application可以查看到. 如下图: cookies: sessionStorage: sessi ...

  2. 前端面试01:描述一下cookices sessionStorage 和 localStorage 的区别

    相同点:都可以存储在客户端 不同点: 1.存储大小 cookie数据大小不能超过4K. sessionStorage 和 localStorage 虽然也有大小限制,但是比cookie大得多,可以达到 ...

  3. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  4. 7,请描述下cookies,sessionStorage和localStorage的区别

    7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...

  5. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  6. cookies、sessionStorage和localStorage的区别

    cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期              ...

  7. 请描述一下 cookies,sessionStorage和localStorage的区别?

    cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大:sessionStorage和 ...

  8. 请描述一下cookies、sessionStorage、localStorage、session四者的区别?

    存储大小: cookie在4K以内. sessionStorage和localStorage在5M以内. 有效时间: cookie:如果未设置过期时间,关闭浏览器时清空:如果设置了有效时间则在到期后清 ...

  9. 请描述一下 cookies,sessionStorage 和 localStorage 的区别

    原文:http://blog.csdn.net/lxcao/article/details/52809939 相同点:都存储在客户端不同点: 1.存储大小 cookie数据大小不能超过4k. sess ...

  10. 描述一下 cookies,sessionStorage 和 localStorage 的区别

    cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),数据会在浏览器和服务器间来回传递.sessionStorage和localStorage不会自 ...

随机推荐

  1. Bzoj 1975: [Sdoi2010]魔法猪学院 dijkstra,堆,A*,K短路

    1975: [Sdoi2010]魔法猪学院 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1357  Solved: 446[Submit][Statu ...

  2. (DT系列五)Linux kernel 是怎么将 devicetree中的内容生成plateform_device

    Linux kernel 是怎么将 devicetree中的内容生成plateform_device 1,实现场景(以Versatile Express V2M为例说明其过程)以arch/arm/ma ...

  3. stl binary search

    stl binary search */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola,&q ...

  4. 彻底理解position与anchorPoint - Wonderffee's Blog(转)

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  5. Centos6.4 openNebula

    OpenNebula 是一套开源的云计算基础管理工具,用来方便管理员在数据中心统一部署.创建.分配和管理大量的虚拟机,企业数据中心可以利用这套工具搭建自己的私有云,为 自己内部提供 IaaS 服务,类 ...

  6. PAT 1074. Reversing Linked List (25)

    Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...

  7. QinQ封装及终结详解

    以下内容摘自正在当当网.京东网.卓越网.互动出版网预售,即将正式发售的<华为交换机学习指南>一书(全书近千页).本书是由华为官方授权,国内第一本,也是唯一一本华为交换机权威学习指南,是华为 ...

  8. 修正android cocos2dx项目当点击属性时提示错误的问题

    近期在用cocos2dx 3.x版本号做android版本号的时候,出现点击project-属性-C/C++ builder的时候会提示 The currently displayed paye co ...

  9. php通过文件头检测文件类型通用类(zip,rar…)(转)

    在做web应用时候,通过web扩展名判断上存文件类型,这个是我们常使用的.有时候我们这样做还不完善.可能有些人上存一些文件,但是他通过修改 扩展名,让在我们的文件类型之内. 单实际访问时候又不能展示( ...

  10. Choosing a Linux Tracer ------Brendan Gregg's Blog

    home Choosing a Linux Tracer (2015) 08 Jul 2015 Linux Tracing is Magic! A tracer is an advanced perf ...