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. LayIM.AspNetCore Middleware 开发日记（四）主角登场（LayIM介绍）

    前言 在前几篇中已经初步介绍了开发AspNetCore中间件的一些基础知识,不过都没有很深入的去研究,后续还是需要去看看源码.本篇呢,终于有点开头的味道了,就是要介绍LayIM了,其实标题写的是主角, ...

  2. 由于开发需求需要在附件查看页面添加水印，于是网上看到一位大牛写了一个js加水印的方法觉得很实用，也很方便，记录一下，哈哈

    大牛的博客链接:https://www.cnblogs.com/daixinyu/p/6715398.html 提供给大家学习 我优化了几点 1,我把水印的样式单独提出来,这样会提高渲染水印的性能 2 ...

  3. 初始化mysql数据库 /usr/bin/mysql_install_db执行时报错

    错误描述: FATAL ERROR: please install the following Perl modules before executing /usr/bin/mysql_install ...

  4. mint-ui 企业微信PC端内置浏览器 Picker 无法滚动

    处理 在主JS代码之上附加以下代码 : <script> if (~navigator.userAgent.toLowerCase().indexOf('windowswechat')) ...

  5. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  6. ThinkPHP微信扫码支付接口

    最近折腾微信扫码支付,看了微信官方文档,找了很多网页,发现和文档/demo不匹配,现在自己算是弄出来了(文件名称有所更改),贴出来分享一下 一.将有用的官方lib文件和使用的相关文件放置到vendor ...

  7. c#网络传输

    接着前面简单讲的,给大家聊聊服务开发. 网络传输 先说网络传输开发,总体来说,可以看成4中模型 我们把传输过程看做网线,那么在通过传输的过程中.2边就涉及池化问题,也就是我们常见的异步传输. 在业务端 ...

  8. phpstrom快捷键

    PhpStorm 常用快捷键和配置 配置 设置代码及字体风格:File->Settings->Editor->Colors&Fonts->Font 安装插件(如:tp, ...

  9. 解决vscode换行光标跳转行首

    这个问题是由于设置自动保存而造成的. 解决方法1:取消自动保存. 解决方法2:在首选项的设置里加上"files.autoSaveDelay": 10000,延迟一小会自动保存的时间 ...

  10. 【 C 】字符串常量

    当一个字符串常量出现在表达式中时,它的值是个指针常量.编译器把这些指定字符的一份拷贝存储在内存的某个位置,并存储一个指向第一个字符的指针.但是,当数组名用于表达式中时,它们的值也是个指针常量.我们可以 ...