Cookie和Ajax入门一、Cookie 在前面我们有学过高版本浏览器支持的缓存，localStorage本地永久缓存

一、Cookie

在前面我们有学过高版本浏览器支持的缓存，localStorage本地永久缓存 sessionStorage 临时缓存。在这之前开发都用cookie它和localStorage、sessionStorage的区别就是储存容量没有他们大，它只有4kb，而localStorage和sessionStorage有3MB。

1.创建Cookie

语法document.cookie 例如：

document.cookie = 'username=张三';
document.cookie = 'password=123456'
/* js=是覆盖  cookie的=是添加 */

2.重新设置日期对象延迟2天

例如：

let oDate = new Date();
oDate.setDate(oDate.getDate()+2);
document.cookie = 'username=lisi;expires='+oDate;
console.log(oDate);
/* cookie要想覆盖 首先Name值要一致 */

3.删除cookie

设置成过期的时间,就可以把对应的值删除了
常用于用户登录之后过个1天账号和密码就需要重新登录的场景,目的在于保证登录的是本人以及数据隐私

例如：

 let oDate = new Date();
 oDate.setDate(oDate.getDate()-1);
 document.cookie = 'username=lis;expires='+oDate;

4.封装一个设置值cookie的函数

@params name String 例如：'username'
@params value String 例如：'123456'
@params time Number 延迟的天数例如：2

用函数封装：

<script>
    function setCookie(name,value,time){
        let oDate = new Date();
        oDate.setDate(oDate.getDate() + time);
        document.cookie = name+ '=' + value +';' + 'expires=' + oDate;
    }
    setCookie('car','Gt5',1);
    setCookie('house','汤臣一品',2)

</script>

5.获取cookie

利用封装cookie以及循环遍历来获取
代码详解：

<button onclick="setCookie('house','汤臣一品',2)">设置house</button>
<button onclick="setCookie('car','Gt5',1);">设置car</button>
<button onclick="getCookie('house')">获取house</button>
<button onclick="getCookie('car')">获取car</button>
<script>
    function setCookie(name,value,time){
        let oDate = new Date();
        oDate.setDate(oDate.getDate() + time);
        document.cookie = name+ '=' + value +';' + 'expires=' + oDate;
    }
    function getCookie(name){
       // console.log(document.cookie);
        let str = document.cookie;
        let arr1 = str.split(';');//用；分割字符串成为数组
       // console.log('arr1'+arr1);//得到arr1house=汤臣一品, car=Gt5
        for(var i = 0;i<arr1.length;i++){
           let arr2 =  arr1[i].split('=');//再利用循环让=变成分隔符
          // console.log('第二个数组'+arr2);//得到第二个数组house,汤臣一品 第二个数组 car,Gt5
            if(name == arr2[0].trim()){//以为car前面会有一个空格，所以要加trim去除
                console.log(arr2[1]);
            }
        }
        
    }
    
</script>

二、Ajax

一般form表单提交数据，是会把整个页面进行刷新，而Ajax是是一种无需重新加载整个页面的情况下实现局部更新使用Ajax有四个步骤：

1.创建Ajax对象

new 一个XMLHttpRequest实例化对象

2.连接到服务器

open(方法，文件名，同步异步)
参数一：post/get
参数二：请求的文件名
参数三：同步（false） 异步（true）

3.发送请求
4.接受返回值例：

<script>
let xhr =  new XMLHttpRequest();//第一步
xhr.open('get','abc.text',true);//第二步
xhr.send();//第三步
//监听返回值 第四步
xhr.onreadystatechange = function(){
    console.log(xhr.responseText); //控制台获取成功abc.text文件
}
</script>

Cookie和Ajax入门