【高版本浏览器支持的缓存】
localStorage(本地的永久缓存) sessionStorage(会话一关闭缓存再打开就没有了)
【 cookie】
你把用户信息存储到cookie中，服务端可以自动的获取
同一个网站中所有页面共享一套Cookie(4KB)
过期时间 时间过期了 里面的内容就消失了
存储的容量 没有localStorage 3M和sessionStorage 3M大
使用live server打开模拟一个用服务器启动的网站 再使用document.cookie
添加cookie
添加用户名
document.cookie = 'username=zhangsan'
document.cookie = 'password=123456'
JS“=”代表覆盖，cookie“=”代表添加
cookie如何取值
console.log( document.cookie ); /*=> username=zhangsan; password=123456
document.cookie = 'username=zhangsan; password=123456' */ /* =>这种方式只能存一个
【重新设置日期对象 延迟2天 】
let oDate = new Date();
oDate.setDate(oDate.getDate()+2);
document.cookie = 'password=123456;expires='+oDate;
document.cookie = 'username=lisi;expires='+oDate;
【cookie要想覆盖 首先Name值要一致 】
document.cookie = 'username=lisi2;expires='+oDate;
【删除cookie 】
设置成过期的时间 就可以把对应的Name值删除了
oDate.setDate(oDate.getDate()-1);
document.cookie = 'username=lisi2;expires='+oDate;
【常用于 用户登录之后 过个1天 账号和密码 就需要重新登录的场景
目的在于保证登录的是本人以及数据隐私】
【封装setCookie 通过name找到对应的value 语法事例】
通过name找到对应的value
function getCookie(name) {
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]) {
console.log(arr2[1]);
}
}
}
<-- form表单提交数据 是会把整个页面进行刷新 重新加载整个网页 -->
【 Ajax 】
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术局部更新
【创建Ajax的步骤 】
【第一步 创建Ajax对象 】
new一个XMLHttpRequest的实例化对象
let xhr = new XMLHttpRequest();
【 第二部 连接到服务器 】
open(方法，文件名，同步异步)
参数一：post/get
参数二：请求的文件名
参数三：同步（false） 异步（true）
xhr.open('get','abc.txt',true)
【第三步 发送请求 】
xhr.send();
【 第四步 接收返回值】
监听返回值
xhr.onreadystatechange = function(){
xhr.responseText 通过ajax请求获得的数据
console.log(xhr.responseText)
}
【注意： 使用live server 打开页面 】
