1.Cookie概念：
<script>
//高版本浏览器支持的缓存
//localStorage(本地永久保存) sessionStorage(会话关闭再次打开没有)
//同一个网站中所有页面共享一套cookie(4kb)
//时间过期自动删除
//容量没localStorage(本地永久保存)3M sessionStorage(会话关闭再次打开没有)大
//把用户信息存储到cookie中，服务端可自动获取
/* 添加cookie */
/* 添加用户名 */
document.cookie = 'username=zhangsan';
document.cookie = 'password=123456'
/* 不可以连一起写 */
/* JS=代表覆盖，cookie代表添加 */
/* cookie如何取值 */
document.write(document.cookie)
</script>
2.Cookie过期时间：
<script>
let oDate = new Date();
console.log(oDate.setDate(oDate.getDay()+2) );
/* 重新设置日期对象 延迟两天 */
console.log(oDate);
oDate.setDate(oDate.getDate()+2)
/* document.cookie = 'password=zhangsan;expires='+oDate */
document.cookie = 'username=sili;expires='+oDate
/* cookie 要想覆盖首先name值要一致 */
/* 删除cookie */
/* 设置成过期的时间,就可以把name值删除了 */
oDate.setDate(oDate.getDate()-1);
document.cookie = 'username=sili;expires='+oDate
/* 常用于 用户登录之后 过个一天 账号和密码就需要重新登录的场景
目的在于保证登录的是本人以及数据隐私 */
</script>
3.setCookie和封装：
<button onclick="setCookie('house','汤臣一品',2)">设置house</button>
<button onclick="setCookie('car','奔驰',2)">设置car</button>
<button onclick="getCookie('house')">获取house值</button>
<button onclick="getCookie('car')">获取car值</button>
<button onclick="delCookie('house')">删除house值</button>
<button onclick="delCookie('car')">删除car值</button>
<script>
/* 通过name删除对应内容 */
/* 把时间设置成过期时间 */
function delCookie(name){
let oDate = new Date();
oDate.setDate(oDate.getDate()-1);
document.cookie = name+'=123'+'=;expires='+oDate;
}
/* 通过name找到value的值 */
function getCookie(name){
console.log(document.cookie);
let str = document.cookie;
let arr1 = str.split(';')
console.log('arr1',arr1);
for(var i=0;i<arr1.length;i++){
console.log('arr1[i]',arr1[i]);
var arr2 = arr1[i].split('=');
console.log('第二个数组',arr2);
if(name==arr2[0].trim()){
console.log(arr2[1]);
}
}
}
/* 封装一个设置cookie的函数 */
/*
*@params name String 例如 'username'
*@params value String 例如 '123456
*@params time Number 延迟的天数 例如 2
*/
function setCookie(name,value,time){
let oDate = new Date();
oDate.setDate(oDate.getDate()+time)
document.cookie = name+'='+value+';expires='+oDate;
}
/* setCookie('car','CT6',1)
setCookie('house','汤臣一品',3)
setCookie('cumputer','rog',4) */
</script>
4.Ajax概念&基础：
<!--form表单提交数据会把整个页面进行刷新 -->
<script>
/* Ajax是无需加载网页的情况下，能够更新部分网页的技术(局部更新) */
/* 创建Ajax步骤 */
/* 1.创建Ajax对象 */
/* new一个XMLHttpRequest的实例化对象 */
let xhr = new XMLHttpRequest();
console.log(xhr);
/* 2.连接到服务器 */
/* 参数一：post/get */
/* 参数二：请求的文件名 */
/* 参数三：同步(false)，异步(true) */
xhr.open('get','abc.txt',true)
/* 3.发送请求 */
xhr.send();
/* 4.接收返回值 */
/* 监听返回值 */
xhr.onreadystatechange = function(){
/*xhr.responseText,通过Ajax请求获取的数据 */
console.log(xhr.responseText);
}
</script>
