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. Repaint轨迹保留?(待处理,待编辑)

    import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import javax.swing.JPane ...

  2. mysqldump备份详解

    -A  备份所有-B  恢复时会自动创建库  (同时支持导出多个库  -B  db01 db02) -d  导出表结构 #库中有多个表导出时导出没加 –B参数,则要先导入结构,如果表结构没有备份,那就 ...

  3. Java 获取当前系统时间方法比较

    转载: http://blog.csdn.net/zzjjiandan/article/details/8372617 一. 获取当前系统时间和日期并格式化输出: import java.util.D ...

  4. House Robber

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  5. iframe自适应高度js

    <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage&qu ...

  6. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  7. eclipse 导入web项目后,线程假死

    eclipse 导入web项目后,就出现关闭后,线程还存在的情况.使用java mission control 查看发现java script indexing线程在running. 关闭js验证后, ...

  8. 打开网页自动弹出QQ对话框的实现办法

    Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...

  9. Android课程---Activity 带返回值的跳转

    Activity2.java package com.hanqi.test4; import android.content.Intent; import android.os.Bundle; imp ...

  10. 带清空按钮的EditText

    public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher { // 删除按钮的 ...