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. appium 环境安装windows

    创建AVD -c  --sdcard  : 指向一个共享的SD存储卡的路径,或者是新的SD储存卡容量大小. -n  --name    : AVD的名字(该项是必须的) -a  --snapshot ...

  2. 如何批量下载bing的背景图片？

    工具准备 wget(点击下载) 批处理命令(点击下载) 网友提供的接口:http://area.sinaapp.com/bingImg?daysAgo=1(1代表天数) 实现步骤 1.打开记事本,并将 ...

  3. javascript学习2

    上次我们了解到 JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象       表示浏览器中打开的窗 ...

  4. Bootstrap--模仿官网写一个页面

    本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...

  5. [转]MVVM架构~mvc,mvp,mvvm大话开篇

    MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新的模式,MVP与MVC有着一 ...

  6. pdo_mysql扩展以及测试

    1.进入 PHP 的软件包 pdo 扩展目录中(注:php的tar包解压目录) 2.配置和编译文件 进入 在PHP源码包中进入 cd /data/php-5.6.36/ext/pdo_mysql 执行 ...

  7. JBPM学习(四)：运行流程实例

    概念: ProcessInstance,流程实例:代表流程定义的一次执行.如:张三昨天按请假流程请了一次假.一个流程实例包含了全部执行阶段,当中最典型的属性就是跟踪当前节点的指针,例如以下图. Exe ...

  8. DecimalFormat的使用

    DecimalFormat,四舍五入时需要设置RoundingMode 1.占位符0: 比实际数字的位数多,不足的地方用0补上. new DecimalFormat("00.00" ...

  9. Spring Boot Admin 2.1.0 全攻略

    转载请标明出处: https://www.fangzhipeng.com 本文出自方志朋的博客 Spring Boot Admin简介 Spring Boot Admin是一个开源社区项目,用于管理和 ...

  10. iOS笔记，开发经验总结【持续更新】

    1. 设置navigationBar 背景颜色有色差, 原因:如果单纯的设置背景颜色也是有高斯模糊处理的效果,对纯色高斯模糊处理过后相当于纯色的70%(猜测)透明化处理,但是反正就是有色差 解决方法一 ...