zoukankan      html  css  js  c++  java
  • web存储机制(localStorage和sessionStorage)

    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>
     
  • 相关阅读:
    字符串样式效果
    javaScript 继承原型链
    javaScript 的继承,call()
    二维数组中的查找
    如何证明一个映射是混沌的。
    netty如何知道连接已经关闭,socket心跳,双工?异步?
    java中线程安全的map是ConcurrentHashMap
    failed to load class "org.sl4j.impl.StaticLoggerBinder"
    Tcp端口以及端口相关协议详解
    Tcp的三次握手,以及原理详解
  • 原文地址:https://www.cnblogs.com/yaoyuqian/p/7901052.html
Copyright © 2011-2022 走看看