zoukankan      html  css  js  c++  java
  • H5新特性 本地存储---cookie localStorage sessionStorage

     本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率

     在html5中提供三种数据持久化操作的方法:

    • 1.cookie 可看作是记录简单内容的文本文件,直接绑定在html页面上。有前端设置和后端设置。有2中存储方式。不常用,难懂

     

      cookie可以保存数据一段时间,只需要设置过期时间,过期时间到了,数据才会被删除;也可以是临时cookie/会话cookie,关闭浏览器,数据就会被删除

    --------------------前端操作cookie----------------------------------------------

       写入cookie:

      document.cookie = 'key=value;expires = 在页面中保存的时间/过期时间戳';      


      【!!前端操作cookie时,时间戳必须通过toGMTString()方法转换为标准时间才行】

       读取cookie:

    console.log(document.cookie);

       删除cookie:

     document.cookie = 'key=value;expires=当前时间戳+1'; 

     任何方式获取到的时间戳都要给Date对象

      前端使用cookie的demo:

    var date = new Date();//获取时间戳  单位是毫秒
    console.log(date.getTime());//getTime()获取时间戳的毫秒数 number
    var expiresss = new Date(date.getTime()+1000*1000).toGMTString();//设置过期时间戳  即缓存时间
    console.log(expires);
    //写入cookie
    document.cookie = 'username=frank;expires='+expiresss;
    //如果不删除cookie,把写入和读取cookie的代码删除后再刷新页面,cookie仍然存在,只有时间戳到期后或者手动写入代码删除cookie,cookie才会被删除
    
    var tempArr = document.cookie.split('=');
    var tempObj = {};
    tempObj[tempArr[0]] = tempArr[1];
    console.log(tempObj);
    console.log(tempObj.username);
    
    //删除cookie
    var expiresss = new Date(date.getTime()+1).toGMTString();

    --------------------后端操作cookie----------------------------------------------

     

    1.写入cookie :setcookie('key','value','expires','path');

     

    2.获取cookie:$_COOKIE;

     

    3.删除cookie:setcookie('key','value','expires+1','path');

     

    setcookie('key','value','expires-1','path');

     

    [说明: 哪个html页面访问了本php文件,就给哪个html页面添加cookie,在php中获取时间戳的方式为time(),单位是s; 前三个参数为必要参数,path为可选参数]

    后端使用cookie的demo:

     

     

    //<button>点我添加cookie</button>
    //----------------------------------------------
    <script>
            (function() {
                var cookie = document.cookie;
                if(cookie.length != 0) {
                    cookie.log('已经登录,不用再显示登录按钮');
                }
            })();
        
            document.querySelector('button').onclick = function() {
                    //Ajax给后端发送请求
                    var xhr = new XMLHttpRequest();//创建对象
                    xhr.onreadystatechange = function() {
                        if(xhr.readyState==4 && xhr.status==200) {
                            console.log(xhr.responseText);//打印后端的返回值
                        }
                     };
                    var formData = new FormData();//FormData()用于将数据编译成键值对,以便用XMLHttpRequest来发送数据----主要用于发送表单数据,也可用于发送带键数据
                    formData.append('uname','frank');//添加字段
                    //formDate对象的字段类型可以时Blob,File,string  如果字段类型不是Blob,也不是File,就会被转成string
        
                    xhr.open('post','lesson2_cookie(server).php',true);
                    xhr.send(formData);    
            }
    </script>

     

    <?php
        $username = $_POST['uname'];
        $success = array('msg'=>'ok','info'=>$_POST);
    
        //设置cookie
        setcookie('uname',$username,time()+60*60*24);//60s*60-->表示1h,60*60*24-->表示一天
        //读取cookie    echo json_encode($_COOKIE);
        //删除cookie    setcookie('uname','',time()-1);
    
        setcookie('key','value','expires','path');//1.写入cookie
    //path指的是cookie要加载到当前域名的哪个位置 设置cookie生效的范围【只有cookie有path】
          $_COOKIE;//2.获取cookie
          setcookie('key','value','expires+1','path');//  3.删除cookie
        setcookie('key','value','expires-1','path');//  3.删除cookie
    
        //给出反馈
        $success = array('msg'=>'OK');
        echo json_encode($success);
    
    ?>

     

     

    • 2.localStorage   永久地保存数据   需要手动删除数据,数据才会消失

        localStorage.setItem(key--string,value--string):缓存当前页面的停留的子页面和展开的数据,当切换出去该页面再回来的时候,展示的仍然是离开时的页面和数据。

        localStorage是持久化的本地保存,只要你没有主动删掉,就会一直存在。就像一些缓存,都把APP卸载了缓存还在。

    window.localStorage.setItem(key,value);//存储指定key的数据(JSON格式)
    
    window.localStorage.getItem(key);//获取指定key的数据
    
    window.localStorage.removeItem(key);//删除指定key的数据
    
    window.localStorage.clear();//清空所有的存储数据
    
     // 在本地存储中只能存储字符串的数据格式,所以从本地获取过来的存储数据需要JSON.stringify()转json对象
    • 3.sessionStorage  

      数据一旦被本地化后,只要页面不关闭就不会主动删除,一旦浏览器关闭后,数据就被自动删除 【在任何位置都能随便访问

       

       sessionStorage会话级别的本地保存,关闭浏览器数据就会消失

    window.sessionStorage.setItem(key,value); //存储
    window.sessionStorage.getItem(key);  //读取
    window.sessionStorage.removeItem(key);  //删除

     简单实例:

      $(function(){
                // 当回车时,将数据存储到本地存储中,并从本地存储读取数据,判断当前数据时正在进行的还是已经完成的,然后再放入相应的列表项里
                // 在本地存储中只能存储字符串的数据格式,所以从本地获取过来的存储数据需要JSON.string()转json对象
                // 数据存储在title中,给个变量判断是否已经完成  var todolist = [{title:'',done:false}]
                var todolist = [
                    {
                        title: '今天要完成jquery视频的学习。',
                        done: false
                    },
                    {
                        title: '今天要健身。',
                        done: false
                    },
                ];
                // 本地存储只能存储字符串数据格式  为了保存数据原有的格式,可以先把数组对象转化为字符串格式
                var tododata = JSON.stringify(todolist);//将json对象转字符串
                // 缓存当前页面的停留的子页面和展开的数据,当切换出去该页面再回来的时候,展示的仍然是离开时的页面和数据。
                localStorage.setItem("todo",tododata);//设置本地存储的字符串数据
                // var data = localStorage.getItem("todo");//获取被赋值后的数据,也是字符串格式
                // var data=JSON.parse(data);//读取之后,要将字符串转回数据原本的数组对象格式。字符串转json对象
                // console.log(typeof(data));
                // console.log(data);
                // console.log(data[0].title);
    
                // 回车事件:
                $(document).keydown(function(e){
                    // 当回车时,从本地存储获取数据,读取数据,判断数据是否已经完成,将数据放入相应的列表里,
                    if(e.keyCode==13){//判断用户是否按下回车键
                        var data = localStorage.getItem("todo");//获取被赋值后的数据,也是字符串格式
                        var data=JSON.parse(data);//读取之后,要将字符串转回数据原本的数组对象格式。字符串转json对象
                        console.log(typeof(data));
                        console.log(data);
                        console.log(data[0].title);
                        // 将获取到的数组对象的title赋值给p标签
                        $('p').text(data[0].title);
                    }
                });
            })

    运用本地存储localStorage的实例:todolist  https://www.cnblogs.com/677a/p/11730470.html

    每天进步一点点
  • 相关阅读:
    Unable To Open Database After ASM Upgrade From Release 11.1 To Release 11.2
    11g Understanding Automatic Diagnostic Repository.
    How to perform Rolling UpgradeDowngrade in 11g ASM
    Oracle 11.2.0.2 Patch 说明
    Pattern Matching Metacharacters For asm_diskstring
    Steps To MigrateMove a Database From NonASM to ASM And ViceVersa
    Upgrading ASM instance from Oracle 10.1 to Oracle 10.2. (Single Instance)
    OCSSD.BIN Process is Running in a NonRAC Environment
    Steps To MigrateMove a Database From NonASM to ASM And ViceVersa
    On RAC, expdp Removes the Service Name [ID 1269319.1]
  • 原文地址:https://www.cnblogs.com/677a/p/11727356.html
Copyright © 2011-2022 走看看