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. 作品第二课----点击DIV显示其内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bzoj 3747: [POI2015]Kinoman 线段树

    3747: [POI2015]Kinoman Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 553  Solved: 222[Submit][Stat ...

  3. pathmunge /etc/profile

    pathmunge () { case ":${PATH}:" in *:"$1":*) ;; *) if [ "$2" = "a ...

  4. java实现简单的文件筛选

    package filenameFilter; import java.io.File; /* * 实现功能: * 获取指定路径下的指定格式的文件; * */ public class Test { ...

  5. N对括号的合法组合

    递归实现,需要注意以下几点: 1. 递归终止条件 2. 递归递推关系式 这里实际上是一个排列问题,只是排列需要满足条件在每一次递归调用时左括号数不能少于右括号数. 还有一点需要特别注意,当推出递归调用 ...

  6. 探讨Web组件化的实现

    CMS组件化,简单架构示意图: Web组件使用WebPage+WebAPI的好处: Ø  组件复用(组件条件管理页面复用+获取组件数据API复用). Ø  组件是分布式的第三方应用,本身高内聚.组件之 ...

  7. Morris Traversal 二叉树遍历。

    那天做了个SWAP NODE的题,要求constant space,不得不Morris Traversal. 稍微研究了一下,真正意义上的O(1)space对二叉树进行遍历.好像是1979年的算法. ...

  8. 第一次尝试使用JAVA编写的ATM机程序

    package study; import java.util.Scanner; public class ATM { private static int[] users = { 111111, 2 ...

  9. Qt 对象间的父子关系

    C++中只要有一个new就必须要有一个delete与之对应 但是Qt中的对象之间有特殊的关系 Qt 对象间的父子关系 每一个对象都保存有它所有子对象的指针 每一个对象都有一个指向其父对象的指针 par ...

  10. JMeter入门(4):Java Request实例

    目的:对Java程序进行测试: 一.核心步骤 1.创建一个Java工程: 2.将JMeter的lib目录下的jar文件添加进此工程的Build Path: 3.创建一个类并实现JavaSamplerC ...