Web Storage包括了两种存储方式:sessionStorage和localStorage

sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

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

Web Storage与cookie异同

  1. cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。
  2. 每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。
  3. cookie 需要指定作用域,不可以跨域调用。
  4. Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。

localStorage浏览器支持情况

 <script type="text/javascript">
// method one
if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
// method two
if(typeof window.localStorage == 'undefined') {
alert("浏览暂不支持localStorage")
}
</script>

localStorage和sessionStorage操作

  • localStorage.setItem(key,value)    // 设置键值对
  • localStorage.getItem(key)      // 通过键值读取对应的值
  • localStorage.removeItem(key)    // 通过键值移除对应的值
  • localStorage.clear()        // 初始化localStorage,清除所有键值对
  • localStorage.key(index)     // 通过下标index来获取指定索引的key名

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

 <script type="text/javascript">
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
</script>

相关:IE专属存储 UserData.

html5 Web Storage(localStorage(),sessionStorage())的更多相关文章

  1. HTML5存储 ——Web Storage(localStorage 和 sessionStorage)

    一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...

  2. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

  3. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  4. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  5. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  6. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  8. web存储机制(localStorage和sessionStorage)

    web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...

  9. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. HTML DOM随笔

    编程接口 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElemen ...

  2. 关于http协议的理解

    一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...

  3. Oracle 部分函数使用说明

    oracle有些函数可能我知道是什么作用,但是具体其实说不清楚,这里是我这几天看到的函数使用方法及说明,记录一下,以后看看 --1.replace('str',oldVal,newVal)替换功能方法 ...

  4. webGL

    WebGL:  是 OpenGL 和 JavaScript 之间的结晶.HTML5 的 canvas 元素里.利用和OpenGL同样的API.可以绘制高精度的三维图像. (OpenGL 能够从任意视点 ...

  5. 安装repcached,并且测试其双向复制是否成功

    备注:本实验不仅包括了repcached,还包括了memcache的配置安装 1.1实验环境. 1.2环境准备. 1.3配置一个memcache. 1.3.1安装memcache. 1.3.2启动me ...

  6. jQuery 插件autocomplete

    jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...

  7. 创建 PDO 实例并在构造函数中设置错误模式

    PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 PDO::errorInfo() 方法来检查语句和数据库对象.如果错误是由于对语句对象的调用而产生的,那么可以调用那个对象的 ...

  8. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  9. BizTalk开发系列(二十五) SQL Adapter

    SQL Server 是.NET开发的首选数据库.当然开发BizTalk应用程序很多也离不了SQL Server.针对SQL Server的数据操作BizTalk 提供了SQL Adapter作为与数 ...

  10. cookie的作用

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.Cookies是当你浏览某网站时,由Web服务器置于你硬盘上的一个非常小的文本文件,它可以 ...