JavaScript(12) -Cookie的使用,Cookie封装及JSON

最新推荐文章于 2023-03-14 20:48:35 发布

选项：C

最新推荐文章于 2023-03-14 20:48:35 发布

阅读量2.1k

点赞数 2

文章标签： javascript 开发语言前端 visual studio code

本文链接：https://blog.csdn.net/weixin_46106512/article/details/123855587

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

1, cookie是什么

  cookie 也叫 HTTPCookie，是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。
 cookie就是为了存储 sessionID而诞生.
cookie的特性,会随着请求自动携带cookie的值到服务器

2, cookie的作用

  cookie的作用主要是在浏览器存储少量数据, 利用cookie我们可以实现一些保存数据的功能.  
 比如: 1, 用户登录的记住密码功能(下次再访问网站时无需输入密码了)；
          2, 购物车，加入购物车的商品没有及时付款，使用cookie保存后, 可以在一定时间后再访问网站, 会发现购物车里还有之前的商品列表;
3.存储一些小的数据  4k

。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Cookie的使用

cookie由键值对形式的文本组成：name=value。

完整格式为：
name=value;[expires=date];[path=路径];[domain=域名];[secure]

其中中括号[]表示该值是可选。
name=value: 为你要保存的键值对(必选)
expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选)
path=路径: 访问路径, 默认为当前文件所在目录(可选)
domain=域名: 访问域名, 限制在该域名下访问(可选)
secure: 安全设置, 如果设置了则必须使用https协议才可获取cookie(可选)

1, 获取和设置cookie

使用document对象来获取和设置cookie:

//设置cookie和获取cookie
document.cookie = "user="+"张三"; //设置
console.log(document.cookie);  //获取

//URI编码后设置cookie, 和URI解码后获取cookie
document.cookie = "user2=" + encodeURIComponent("张三");
console.log(decodeURIComponent(document.cookie));

2, expires=失效时间

失效时间: 表示cookie会在该时间被删除掉, 默认是浏览器关闭的时候;

可以自己设置cookie的失效时间。如设置7天后再删除cookie

var date = newDate();  
date.setDate(date.getDate() +7); 
document.cookie = “user=张三;expires=” + date;

主动删除cookie
失效时间设置在现在时间或现在之前的时间即可删除指定cookie
name值为指定要删除的那个cookie

var date = new Date();
document.cookie = “user=张三;expires=” + date;

3, path=路径

设置路径后, 则只有设置的那个路径文件才可以访问cookie, 默认为当前文件所在目录
一般设置path=/, 表示磁盘(域名)根目录, 则其他路径也可以获取到该cookie值

document.cookie = “user=abc;expires=" + date + ";path=/";

注意: 在设置路径path时, 要记得设置失效时间expires

4, domain=域名

 用于限制只有设置的域名才可以访问，没有设置则默认为当前域名。

document.cookie = “user=张三;domain=www.baidu.com”;

5, secure 安全设置

指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。

document.cookie = “user=张三;secure”;

二、Cookie封装

将cookie相关的操作封装在函数中, 方便以后调用, 一般我们只要设置name, value, expires, path即可;

//设置cookie
function setCookie(name, value, expires, path) {
     var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
     if (expires instanceof Date) {
          cookieText += ";expires="+expires;
     }
     if (path) {
          cookieText += ";path="+path;
     }
     document.cookie = cookieText;
     return decodeURIComponent(document.cookie);
}

//获取cookie
function getCookie(name) {	
      var cookie = decodeURIComponent(document.cookie);	
      var arr = cookie.split(“; ”);	
      for (var i=0; i<arr.length; i++) {			
            var arr2 = arr[i].split(“=”);		
            if (arr2.length >= 2) {		
	   if (arr2[0] == name) {				
                       return arr2[1];			
                  }		
            }	
      }	
      return “”;
}
//删除cookie
function removeCookie(name) {
     document.cookie=encodeURIComponent(name)+“=; expires=” + new Date();
}

三、JSON

1, JSON

JSON 是一种结构化的数据表示方式(数据格式). 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化,

除了JSON外, 还有XML也是一种数据表示方式; 目前很少使用XML的数据格式, 在这里我们只介绍JSON.

2, JSON的写法

对象的表现形式: 包括数组和对象
字符串的表现形式: 包括数组和对象的字符串

//对象的写法:  使用双引号
    {“name”:“Zhang”, “age”:100}
//数组的写法: 
    [“张三”, “李四”, “王五”]
//对象和数组结合的写法: 
[
      { “name” : “张三”,  “age” : 33 },
      { “name” : “李四”, “age” : 44 }
]

3, JSON的两种表现形式

//JSON对象: 
var jsonObj = [
      	               {“name” : “张三”, age” : 33 },
      	               { “name” : “李四”, “age” : 44 }
	          ]
//JSON字符串: 
var jsonStr = ‘[{“name” : “张三”, “age” : 33}, {“name” : “李四”, “age” : 44}]’;

4, JSON解析

JSON解析就是将JSON字符串变成JSON对象(对象或数组)的过程;

eval():  但这个方法可能会造成安全问题
JSON.parse(): 常用该方法进行解析. (兼容IE8+)

例如:

var jsonStr = '[{"name": "a","age" : 1},{"name" : "b","age" : 2}]';	
  var jsonOjb = JSON.parse(jsonStr);   
  console.log(jsonStr);
  console.log(jsonObj);

(注意单双引号, 将单引号写在外面, 里面用双引号)

5, JSON序列化

JSON序列化就是将JSON对象(对象或数组)变成JSON字符串的过程; 和JSON解析相反; JSON.stringify():
JSON序列化

例如:

var jsonObj = [{name : 'a', age : 1},{name : 'b', age : 2}];	
  var jsonStr = JSON.stringify(jsonObj);	
  console.log(jsonStr);	
  console.log(jsonStr);

代码

1.cookie

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
        //cookie 里面的数据存储以键值对的形式存储 key = value
        //完整格式 name = value;[expires];[path=路径];[domain=域名],[secure] 带[]都是可以省略的
        //name = value 对应的存值
        // expires 日期 (过期时间)
        // path 路径
        // domain 域名
        // secure 安全性设置
        console.log(document.cookie);
        //存值 需要传递key和value
        document.cookie = `姓名=张三,年龄18`//直接这样设置默认过期时间为你浏览器关闭(会话结束)以后
        //我们也可以使用浏览器自带的清除浏览记录功能强行清除cookie
        console.log(document.cookie);
        // encodeURIComponent() //对数据进行编码 ASCII码 针对于解决这个方法低版本浏览器不支持中文
           var str = encodeURIComponent('刘德华')
           console.log(str);
        //    decodeURIComponent()//对数据进行解码
            console.log(decodeURIComponent(str)); 
        //删除 设置expires属性(设置过期时间) 时间如果已经过去就不会有过期了 到达时间自动过期
        document.cookie = 'name=jack;expires='+new Date('2022/3/30 15:05:00')    
    </script>
    
</body>
</html>

2.cookie相关属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="cookie.js"></script>
    <script>
      // 存值 document.cookie 进行赋值
      document.cookie = 'name = jack'
      //只会存在一个cookie 因为对于的键一致 重新给指定的键赋值相当于替换
      document.cookie = 'name=rose'
      //取值 document.cookie
      console.log(document.cookie);
      //删除 设置过期时间 expires 设置过期时间 设置为当前时间的意思就是说关闭就过期
      document.cookie = 'name=rose;expires='+new Date()
      //path属性 指定对应的目类下的文件可以访问这个cookie (指定可以访问这个cookie的路径)
      // /表示指定根路径下的所有文件都可以 也就是对应路径的请求都会带上这个cookie
      document.cookie = 'name=rose;expires='+new Date()+';path=/'
      // document属性 指定域名 只在这个域名访问下才带上cookie
      document.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com'
      // secure 安全 带上就是只有https才能访问 不带都可以访问
      document.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com/secure'

     
      console.log(setCookie("四大天王", "刘德华", new Date(), "/"));
      console.log(getCookie("四大天王"));
    </script>
  </body>
</html>

3.cookie的封装

// 封装cookie对应的方法 常用的对应的key和value expires过期时间  path
    //set的方法
    function setCookie(key,value,date,path){
        if(date instanceof Date){// instanceof是否俩个属于同一个类型
            document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${date};path=${path}`
        }else{
            document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${new Date()};path=${path}`
        }
    }
    //get的方法 获取对应key的cookie值
    //username=zhangsan;age=lisi
    function getCookie(key){
        var key = encodeURIComponent(key)
        var cookies =  document.cookie.split(';')
        for(var i in cookies){
            //取出对应的键的下标
            var index = cookies[i].indexOf('=')
            if(cookies[i].indexOf(key)!=-1){
                var value = cookies[i].substr(index+1)
                return decodeURIComponent(value)
            }
        }
        return ''
    }
    //remove 间隔几天以后过期
    function removeCookie(key,day){
        var date = new Date()
        date.setDate(date.getDate+day)
        document.cookie = encodeURIComponent(key)+'=;expires='+date
    }
    // function removeCookie(name) {
    //     document.cookie=encodeURIComponent(name)+"=; expires=" + new Date();
    // }

4.作业

十天内免登陆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: aqua;
            margin: 50px auto;
            font-family: cursive;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input{
            margin-bottom: 10px;
        }
        #btn{
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <form action="#">
            账号:<input id="account" type="text" name="usernama"><br>
            密码:<input id="password" type="text" name="password"><br>
            <input type="checkbox" id="checkBox">十天免登陆<br>
            <button type="submit" id = "btn">确定</button>
            <button type="reset">重置</button>
        </form>
    </div>

    <script src="./js/cookie.js"></script>
    <script>
        // 十天内免登陆
        //如下图, 有账户,密码输入框, 当用户点击确定按钮, 如果选择了十天内免登录, 则将账户和密码保存在cookie中.
        //当下一次再进入该页面时, 自动填写上次保存的账户和密码 
        var account = document.getElementById('account')
        var password = document.getElementById('password')
        //当下一次再进入该页面时,自动填写上次保存的账号和密码
        if(getCookie('usernama')!=''){
            //里面有usernama的时候取出来
            account.value = getCookie('usernama')
            password.value = getCookie('password')
        }
        //获取对应的Checkbox
        var checked = document.getElementById('checkBox')
        document.getElementById('btn').onclick = function(e){
            e.preventDefault()
            if(account.value.trim()=='' || password.value.trim()==''){
                alert('用户名和密码不允许为空')
            } else{
                //判断是否勾选了对应的日期
                if(checked.value=='ok'){
                    //获取十天以后的日期
                    var date = new Date()
                    date.setDate(date.getDate()+10)
                    //将用户和密码存入 存入cookie中
                    setCookie('usernama',account.value,date,'/')
                    setCookie('password',password.value,date,'/')
                }
            }
        }
        //点击事件
        checked.onclick = function(){
            if(this.value == "ok"){
                //如果存在value
                this.removeAttribute('value')
            }else{
                this.setAttribute('value','ok')
            }
        }
    </script>
</body>
</html>

以上就是今天要讲的内容，本文仅仅简单介绍了Cookie的使用和封装还有json介绍。

选项：C

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(12) -Cookie的使用,Cookie封装及JSON

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言1, cookie是什么2, cookie的作用一、Cookie的使用1, 获取和设置cookie2, expires=失效时间3, path=路径4, domain=域名5, secure 安全设置二、Cookie封装三、JSON1, JSON2, JSON的写法3, JSON的两种表现形式4, JSON解析5, JSON序列化代码1.cookie2.cookie相关属性3.cookie的封装4.作业十天内免登陆前言1.
复制链接

扫一扫