web存储包括两种：sessionStorage 和 localStorage（都是限定在文档源级别，非同源文档间无法共享）

1.sessionStorage 数据放在服务器上（IE不支持）

    严格用于一个浏览器会话中存储数据，数据在浏览器关闭后会立即删除

2.localStorage 数据在客户端（低版本IE ( IE6, IE7 ) 不支持，并且不支持查询语言）

    跨会话持久化地存储数据

localStorage与sessionStorage的区别：

    localStorage只要在相同的协议、相同的主机名、相同的端口下，即同源就能读取/修改到同一份localStorage数据。

    sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

用法相同：（以sessionStorage为例）

    1.添加：

        sessionStorage.setItem(key, value);//value可以任何数据类型

    2.获取：

        sessionStorage.getItem(key);

    3.删除：

        sessionStorage.removeItem(key);//删除该存储对象中key的键值对

    4.清除所有：

        sessionStorage.clear();//清除该存储对象中所有的键值对

    5.检索（查）：

        sessionStorage.key();//检索key[n]的值

实例：
    localStorage.setItem("x",1);//以"x"的名字存储一个数值

    localStorage.x = 1;//直接向 Web 存储对象添加键/值对

    localStorage.getItem("x");//获取数值

    localStorage.x;//直接从 Web 存储对象中检索键/值对

    localStorage.removeItem("x");//删除“x”项。

    //removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）

    localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式

    //将一个数组存储为字符串

    var myArray = new Array('First Name', 'Last Name', 'Email Address');

    localStorage.formData = JSON.stringify(myArray);

    //检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组

    var myArray = JSON.parse(localStorage.formData);


还有一种更实用的存取方法：
    var obj = {

            name: 'doctorhou',

            describe: '高大、威猛、帅气'

        };

        localStorage.setItem('test', JSON.stringify(obj));

        JSON.parse(localStorage.getItem('test'));

    // 存储数据发生改变的时候（对应事件）：window.onstorage

示例：

　　<body>

        <h3>这是我的用户名和密码</h3>

        <div id="username"></div>

        <div id="password"></div>

        <script>

        // 1.获取对象

        var username = document.getElementById('username');

        var password = document.getElementById('password');

        // 2.将存储的数据写入到两个div中

        username.innerHTML = localStorage.getItem('username');

        password.innerHTML = localStorage.getItem('password');

        // 3.做stroage的事件监听

        window.onstorage = function(e) {

            // StorageEvent

            // console.log(e);

            // console.log(e.key);修改的键

            // console.log(e.oldValue);原来的值

            // console.log(e.newValue);新值

            username.innerHTML = e.newValue;

        }

        </script>

    </body>
 

web存储机制（localStorage和sessionStorage）的更多相关文章

  1. HTML5 web存储之LocalStorage和sessionStorage

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

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

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

  3. HTML 5 Web 存储：localStorage和sessionStorage

    本文内容摘自http://www.w3school.com.cn/ 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessi ...

  4. Web存储机制—sessionStorage,localStorage使用方法

    Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 W ...

  5. web 本地存储 （localStorage、sessionStorage）

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

  6. [web 前端] web本地存储（localStorage、sessionStorage）

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

  7. web本地存储（localStorage、sessionStorage）

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

  8. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  9. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

随机推荐

  1. MySQL 分库分表方案，总结的非常好！

    前言 公司最近在搞服务分离,数据切分方面的东西,因为单张包裹表的数据量实在是太大,并且还在以每天60W的量增长. 之前了解过数据库的分库分表,读过几篇博文,但就只知道个模糊概念, 而且现在回想起来什么 ...

  2. mean函数一个神代码

    cs231n上的一个代码,能求出准确率: print 'accuracy: %f' % ( np.mean(Yte_predict == Yte) ) >>> a = np.arra ...

  3. 推荐一个WPF仪表盘开源控件

    前段时间,做服务器端监控系统,为了界面好看,采用WPF.硬件相关监控,比如CPU.内存等,想用仪表盘控件.网上找了很多这种控件,基本上都是第三方商业控件(虽然很漂亮,不过得money...).最后在C ...

  4. Dubbo实践（三）框架设计

    整体设计 图例说明: 图中左边淡蓝背景的为服务消费方使用的接口,右边淡绿色背景的为服务提供方使用的接口,位于中轴线上的为双方都用到的接口: 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层 ...

  5. 编译nginx错误：make[1]: *** [/pcre//Makefile] Error 127

    --with-pcre=DIR 是设置源码目录,而不是编译安装后的目录.

  6. JAVA并发(一)

    java并发的一系列框架和技术主要是由java.util.concurrent 包所提供.包下的所有类可以分为如下几大类: locks部分:显式锁(互斥锁和速写锁)相关: atomic部分:原子变量类 ...

  7. prometheus监控redis

    下载redis_exporter插件 代理插件不一定非要安装在redis端 wget https://github.com/oliver006/redis_exporter/releases/down ...

  8. 四、spring成长之路——springIOC容器（下）

    目录 5.spring注解开发(Spring扩展知识) 5.1定义配置类:@Configuration 声明一个类为IOC容器 @Bean定义一个Bean 5.2.按照条件进行注入 5.3.@Impo ...

  9. Linux下Tomcat性能优化--文件句柄数增大

    今天在对项目进行性能压力测试时,设置并发量为1000,发现Tomcat控制报错: java.IOException:打开的文件过多 经搜索,发现是由于Linux默认设置的句柄数为1024,当并发量过大 ...

  10. 购物车业务逻辑（vuex）

    list(列表页): 1:发送ajax请求,获取相应的数据 2:给每一个上平添加一个点击事件 3:每一个商品都要有一个ID 4:当点击商品时,将商品id值传递给详情页 details(详情页): 1: ...