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. HTTPS科普扫盲

    为什么需要HTTPS HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...

  2. .net發送郵件

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Mail; using Syst ...

  3. virtualbox+vagrant学习-4-Vagrantfile-7-WinRM Settings

    WinRM Settings 配置命名空间config.winrm config.winrm配置与如何通过winrm配置vagrant访问你的Windows客户相关.与大多数vagrant设置一样,默 ...

  4. IIS - 虚拟目录与应用程序的异同

    在Windows 7 IIS7中,对服务器建立站点后,有二种添加子站点的方式 A. 虚拟目录 B. 应用程序   简单总结下二者之间的异同 A.虚拟目录     虚拟目录是指在站点下建立一个虚拟子目录 ...

  5. 实际SQL案例解决方法整理_LEAD函数相关

    表结构及数据如下: 需求: 将记录按照时间顺序排列,每三条记录为一组,若第二条记录与第一条记录相差5分钟,则删除该记录,若第三条与第二条记录相差5分钟,则删除该记录, 第二组同理,遍历全表,按要求删除 ...

  6. 事务与MVCC

    前言 关于事务,是一个很重要的知识点,大家在面试中也会被经常问到这个问题: 数据库事务有不同的隔离级别,不同的隔离级别对锁的使用是不同的,**锁的应用最终导致不同事务的隔离级别 **:在上一篇文章中我 ...

  7. UITextView 光标定位

    在使用UITextView的时候, 如何在光标的位置插入字符 或者 图片? 以下Demo为你解答: 应用背景:键盘自定义emoji表情 #pragma mark - KVO - (void)obser ...

  8. 使用img标签能使用background-size:conver一样的效果

    使用css img { object-fit: cover; object-position:left center; } 就可以达到 和 background-size:cover; 一样的效果 共 ...

  9. Bugku一段base64

    本文转自:本文为博主原创文章,如有转载请注明出处,谢谢. https://blog.csdn.net/pdsu161530247/article/details/74640746 链接中高手给出的解题 ...

  10. SQL注入科普

    技术交流,安全交友联系渔夫”小白“,微信号(xz116035) SQL注入介绍 SQL注入攻击是最为常见的Web应用安全漏洞之一,国外知名安全组织OWASP针对web应用安全漏洞进行了一个排名,SQL ...