• JavaScript-Cookie


    一、什么是Cookie?

      页面用来存放信息 

      用户通过浏览器发送请求,会创建Cookie,可以通过JS来读取创建删除Cookie

    二、 Cookie的特性?

      数量、大小有限

      有过期时间

      同一个网站只能共享同一套Cookie,也就是同一个域名

      不指定过期时间,到浏览器关闭,就自动清除

    !!!-JS

      *********第一个Cookie

        alert(document.cookie);

        注意:alert(document.cookie());这样写是错误的,不能带括号

      *********自定义Cookie

        document.cookie='user=2';
        document.cookie='pwd=3';
        alert(document.cookie);

        注意:自定义Cookie是直接用document.cookie=“”来创建的,不用赋值给变量,=就是添加,不会覆盖

       *******设置Cookie过期时间

        var time=new Date();

        time.setDate(time.getDate());

        document.cookie="user=mwl;expires="+time;

        alert(document.cookie);

      ******封装Cookie

        设置Cookie

        function setCookie(name, value, iDay)
        {
          var oDate=new Date();
          oDate.setDate(oDate.getDate()+iDay);
          document.cookie=name+'='+value+';expires='+oDate;
        }

        setCookie('mwl','jiajia',15);

      读取Cookie

        function getCookie(name)
        {
          var arr=document.cookie.split('; ');
          for(var i=0;i<arr.length;i++)
          {
             var arr2=arr[i].split('=');
             if(arr2[0]==name)
             {
               return arr2[1];
              }  
          }
          return '';
        }

        alert(getCookie('sex'))

      删除Cooie

        function removeCookie(name)
        {
          setCookie(name, 1, -1);
        }

        removeCookie('password');

    !!!实例

       ---HTML

        <form id="form1" action="http://www.zhinengshe.com/">
          用户名:<input type="text" name="user" /><br>
          密码:<input type="password" name="pass" /><br>
          <input type="submit" value="登陆" />
        </form> 

        !!!-JS 

        function setCookie(name, value, iDay)
        {
          var oDate=new Date();
          oDate.setDate(oDate.getDate()+iDay);
          document.cookie=name+'='+value+';expires='+oDate;
        }

        function getCookie(name)
        {
          var arr=document.cookie.split('; ');
          for(var i=0;i<arr.length;i++)
          {
            var arr2=arr[i].split('=');
            if(arr2[0]==name)
            {
              return arr2[1];
            }
          }
          return '';
        }

        function removeCookie(name)
        {
          setCookie(name, 1, -1);
        }

        window.onload=function ()
        {
          var oForm=document.getElementById('form1');
          var oUser=document.getElementsByName('user')[0]; 
          oForm.onsubmit=function ()
          {
            setCookie('user', oUser.value, 14);
          };
          oUser.value=getCookie('user');
        };

  • 相关阅读:
    前端试题-CSS试题(1)
    前端学习-jQuery源码学习
    前端-值得抽空看看
    CSS编码规范(转)
    网络-HTTPS科普扫盲贴(转)
    可视化框架设计-序
    G2 DT时代的图形语法 正式发布
    AntV 数据可视化解决方案发布
    开源、免费功能全面的Chart图
    React学习笔记之一
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/7966329.html
Copyright © 2020-2023  润新知