html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

  sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

  而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

  Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

  除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

  但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

html5 web storage的浏览器支持情况

  浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

  要判断浏览器是否支持localStorage可以使用下面的代码:

localStorage和sessionStorage操作

  localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

setItem存储value

  用途:将value存储到key字段

   用法:.setItem( key, value)

   代码示例:

getItem获取value

  用途:获取指定key本地存储的值

   用法:.getItem(key)

   代码示例:

removeItem删除key

  用途:删除指定key本地存储的值

   用法:.removeItem(key)

   代码示例:

clear清除所有的key/value

  用途:清除所有的key/value

   用法:.clear()

   代码示例:

其他操作方法:点操作和[]

  web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

localStorage和sessionStorage的key和length属性实现遍历

  sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

  storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

  storage事件对象的具体属性如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

Web Storage Demo

  HTML5 Demos: Storage Web Storage Example

html5中的SessionStorage 和localStorage的更多相关文章

  1. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  2. 关于HTML5中的sessionStorage和localStorage

    需求: 做项目的时大多数情况下我们需要对请求的数据进行多次复用,为了降低请求次数我们需要对请求的数据进行本地存储: 以前用的cooking来存储为本地数据,HTML5后提出sessioStorage. ...

  3. Web Storage中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  4. 关于HTML5中的sessionStorage的会话级缓存使用

    sessionStorage作为HTML5的Web Storage的两种存储方式之一.    用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数 ...

  5. Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  6. 【前端】Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  7. 数据存储-cookie、sessionstorage、localstorage

    HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...

  8. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  9. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

随机推荐

  1. 解决webpack不是内部命令

    在指定路径下安装webpack npm install webpack --save-dev 但是报”不是内部命令错误" 解决方法:安装全局webpack   npm install web ...

  2. Pascal可视化编程 CodeTyphon 、Lazarus

    CodeTyphon是一个免费的Pascal语言可视化编程工作室软件包,基于Free Pascal和Lazarus.相当于Delphi 的RAD Studio. CodeTyphon支持多平台开发,包 ...

  3. Javascript中的闭包(六)

      一.什么是闭包  函数可以记住并访问所在词法作用域时,就产生了闭包,即使在词法作用域外调用函数. (也就是说如果一个函数在执行完之后,其中的内部包含的函数仍然对该函数的作用域持有着引用(函数执行完 ...

  4. Network Emulator Toolkit (NEWT) 网络限速工具 (手机和电脑方面)

    下载地址: https://blog.mrpol.nl/2010/01/14/network-emulator-toolkit/ 参考博客: http://blog.csdn.net/lluozh20 ...

  5. 样式学习--参照Oracle写法

    #------------------------------------------------------------------------------- # Do not change the ...

  6. 协同过滤CF算法之入门

    数据规整 首先将评分数据从 ratings.dat 中读出到一个 DataFrame 里: >>> import pandas as pd In [2]: import pandas ...

  7. AWS CLI以及AWS S3 SYNC命令行使用

    1.到AWS的IAM创建用户,并且获取到访问密钥 ID 和私有访问密钥.下载密钥并保存. 2.到http://docs.amazonaws.cn/cli/latest/userguide/instal ...

  8. 用PNG作为Texture创建Material

    转自:http://aigo.iteye.com/blog/2279512 1,导入一张png素材作为Texture 2,新建一个Material,设置Blend Mode为Translucent,连 ...

  9. SonarQube

    代码质量管理 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等)不 ...

  10. Ubuntu下Code::Blocks错误

    #error This file requires compiler and library support for the ISO C++ 2011 standard. This support i ...