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. [19/05/02-星期四] GOF23_行为型模式(状态模式、观察者模式、备忘录模式)

    一.状态模式 [状态接口] /*** * 房间"状态"接口 */ package cn.sxt.state; public interface State { void handl ...

  2. PHP异步：在PHP中使用 fsockopen curl 实现类似异步处理的功能

    PHP从主流来看,是一门面向过程的语言,它的最大缺点就是无法实现多线程管理,其程序的执行都是从头到尾,按照逻辑一路执行下来,不可能出现分支,这一点是限制php在主流程序语言中往更高级的语言发展的原因之 ...

  3. 《metasploit渗透测试魔鬼训练营》学习笔记第九章--meterpreter

    七.强大的meterpreter  7.1再探metasploit的攻击载荷模块     7.1.1典型的攻击载荷模块     metasploit涵盖了各大主流操作系统和平台,其中绝大部分是远程漏洞 ...

  4. Kali-linux破解纯文本密码工具mimikatz

    mimikatz是一款强大的系统密码破解获取工具.该工具有段时间是作为一个独立程序运行.现在已被添加到Metasploit框架中,并作为一个可加载的Meterpreter模块.当成功的获取到一个远程会 ...

  5. 用ReentrantLock和Condition实现线程间通信

    在Java多线程中,除了使用synchronize关键字来实现线程之间的同步互斥,还可以使用JDK1.5中新增的RetrantLock类来实现同样的效果.RetrantLock类的扩展功能也更加强大, ...

  6. ethereumjs/ethereumjs-blockchain-1-简介和API

    https://github.com/ethereumjs/ethereumjs-blockchain SYNOPSIS概要 A module to store and interact with b ...

  7. Eclipse配置多个Tomcat服务器

    我们在开发大型web项目时,经常需要在eclipse中同时启动多个tomcat服务器来开启多个服务.这里讲解一下如何在eclipse中配置多个tomcat服务器. 配置步骤 1. 在tomcat官网( ...

  8. 404 Note Found 队-Alpha 事后诸葛亮

    目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结: 本小组和其他组的评分 分工和贡献分 全组讨论的照片 问题 第一组提问回答:爸爸饿了队 第二组提问回答:拖 ...

  9. BroadcastReceiver(接收广播)

    Broadcast Receiver用于接收并处理广播通知(broadcast announcements).多数的广播是系统发起的,如地域变换.电量不足.来电来信等.程序也能够播放一个广播. 程序能 ...

  10. iOS App占用太多磁盘空间

    问题:随着App的不断运行,发现所占磁盘空间越来越大 分析:应该是网络下载中的缓存,包括利用SDWebImage产生的.和下载单个文件被取消后的缓存 验证:查看App目录中的Tmp(系统存放未下载完成 ...