一.cookie保存数据和获取数据
// <input type="button" value="保存cookie" onclick="saveData()">
// <input type="button" value="获取cookie" onclick="getData()">
// 保存数据的格式：
// document.cookie="键=值;expires=日期的GMT格式的字符串"
function saveData() {
// 在cookie里保存数据
// 1、如果不写失效时间，那么，数据是临时保存。当浏览器关闭就会消失。
// document.cookie = "username=宋和叶";
// 2、如果写上失效时间点，那么，数据将会在该时间点后，被删除。
// document.cookie = "username=宋和叶;expires=日期的GMT字符串格式";
let d = new Date();
d.setDate(d.getDate() + 7);
document.cookie = "username=宋和叶;expires=" + d.toGMTString();
}
function getData() {
console.log(document.cookie); //所有的键值对（用分号隔开的）
}
二.获取cookie中指定键的值
// 封装：从cookie获取指定键的值；（根据键获取值）；
// 参数：
// 键
// 返回值：
// 键对应的值；
function getCookie(key) {
let str = document.cookie;// a=20; username=宋和叶; userid=001
// 1、分割成数组
let arr = str.split("; ");//["a=20","username=宋和叶","userid=001"]
// 2、遍历数组(查找以username=开头的元素)
str = arr.filter(item => item.startsWith(key + "="))[0]; //"username=宋和叶"
return str == undefined ? undefined : str.split("=")[1];
}三.删除cookie
//<input type="button" value="删除cookie中username" onclick="removeCookie()">
function removeCookie() {
let d = new Date();
d.setDate(d.getDate() - 1);
document.cookie = "username=byebye;expires=" + d.toGMTString();
}四.encodeURIComponent
如果有中文问题（以前的浏览器），使用encodeURIComponent进行编码（URI的编码），使用decodeURIComponent进行解码
//<input type="button" value="编码" onclick="saveData()">
//<input type="button" value="解码" onclick="getData()">
let str = "懒洋洋";
function saveData() {
str = encodeURIComponent(str);
console.log(str);
}
function getData() {
str = decodeURIComponent(str);
console.log(str);
}五.封装cookieTools
cookie的特点：
1、生命周期：
cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了；如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。
2、网络流量：cookie的数据每次都会发给服务器端，占用了网络流量。
3、安全性：cookie会随着HTTP header发送到服务器端，所以安全性有问题，容易被截获。
4、大小限制：cookie大小限制在4KB，非常小；
5、cookie只能保存字符串
// 保存cookie（新建和修改）
// 参数：
// 键:key
// 值:value
// 时长（保质期）：daycount
// path
// domain
function saveCookie(key, value, daycount, path, domain) {
let d = new Date();
d.setDate(d.getDate() + daycount);
let str = `${key}=${encodeURIComponent(value)};expires=${d.toGMTString()}`;
path && (str += `;path=${path}`);
domain && (str += `;domain=${domain}`);
document.cookie = str;
}
// 获取cookie（根据键获取值）
// 参数：键
// 返回值：键对应的值
function getCookie(key) {
let str = decodeURIComponent(document.cookie);
// 1、分割成数组
let arr = str.split("; ");
// 2、遍历数组
arr = arr.filter(item => item.startsWith(key + "="));
return arr.length == 0 ? undefined : arr[0].split("=")[1];
}
// 删除cookie
// 参数：键
function removeCookie(key) {
saveCookie(key, "byebye", -1);
}六.七天免登录
// <p>用户名：
// <input id="username" type="text" />
// </p>
// <p>密码：
// <input id="pass" type="password" />
// </p>
// <p>
// <input type="button" value="登录" onclick="loginCheck()">
// </p>
<script src="./js/cookieTools.js"></script>
function loginCheck() {
let username = document.getElementById("username").value;
let pass = document.getElementById("pass").value;
// 发送请求
// 响应回来后（如果登录成功）
// 1、保存cookie
saveCookie("username", username, 7);
// 2、跳转到首页
location.href = "index.html";
}七.XSS攻击
原理：
通过将一些字符特殊地对待来区别文本和标记，例如，小于符号（<）被看作是HTML标签的开始，<title>与</title>之间的字符是页面的标题等等。当动态页面中插入的内容含有这些特殊字符（如<）时，用户浏览器会将其误认为是插入了HTML标签，当这些HTML标签引入了一段JS脚本时，这些脚本程序就将会在用户浏览器中执行。所以，当这些特殊字符不能被动态页面检查或检查出现失误时，就将会产生XSS漏洞。
<!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: 300px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
</div>
<input id="txt" type="text" style="width: 800px"><br />
<input type="button" value="留言" onclick="send()">
<!-- <input type="button" value="按钮" onclick="location.href='http://www.itzhihu.cn?c='+document.cookie" /> -->
</body>
</html>
<script>
function send() {
$("box").innerHTML += $("txt").value + "<br/>"
// 如何防止
// let str = $("txt").value;
// str = str.replace(/</g, "<");
// str = str.replace(/>/g, ">");
// // console.log("str", str);
// $("box").innerHTML += str;
}
function $(id) {
return document.getElementById(id);
}
</script>八.localStorage
1）、存储数据：localStorage.setItem(键,值)；
2）、获取数据：localStorage.getItem(键);
3）、删除数据：localStorage.removeItem(键);
4）、删除所有的数据：localStorage.clear();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="本地保存数据（localStorage）" onclick="saveData()">
<input type="button" value="本地获取数据（localStorage）" onclick="getData()">
<input type="button" value="删除数据（localStorage）" onclick="removeData()">
</body>
</html>
<script>
function saveData() {
localStorage.setItem("username", "懒洋洋");
}
function getData() {
console.log(localStorage.getItem("username"));
}
function removeData() {
localStorage.removeItem("username")
}
</script>九.sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="本地保存数据（sessionStorage）" onclick="saveData()">
<input type="button" value="本地获取数据（sessionStorage）" onclick="getData()">
<input type="button" value="删除数据（sessionStorage）" onclick="removeData()">
</body>
</html>
<script>
function saveData() {
sessionStorage.setItem("username", "宋和叶");
}
function getData() {
console.log(sessionStorage.getItem("username"));
}
function removeData() {
sessionStorage.removeItem("username")
}
</script>十.cookie，localStorage，sessionStorage 的区别：
cookie是在HTML4中使用的给客户端保存数据的，也可以和session配合实现跟踪浏览器用户身份；而webstorage（包括：localStorage和sessionStorage）是在HTML5提出来的，纯粹为了保存数据，不会与服务器端通信。WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
相同点：
cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型：都是字符串。
不同点：
1、生命周期：
1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。
2）、localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
3）、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
可以简单的理解为：sessionStorage，没有设置有效期的cookie。
如果说把cookie的有效期设置为永远永远，永久，那么就是localStorage。cookie没有设置有效期，那么就是sessionStorage
2、网络流量：cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。
3、大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M
4、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。
5、使用方便性上：WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
十一.jsonp的跨域的本质
①jsonp跨域的本质
利用html标签的src属性（浏览器没有对src属性做跨域的限制）
②跨域访问的几种方式
jsonp、cors、proxy
③JSONP原理
JSONP是如何实现跨域访问的？本质上是利用HTML元素的src属性都可以跨域的思路来解决的。 如：img，script，iframe等标记的src属性的值都可以赋成其它域名的合法地址。
④案例：百度的搜索框
⑤cors
这是后端的解决方案 cross origin resource share
//在服务器端的页面上增加以下代码完成。
response.setHeader(“Access-Control-Allow-Origin”, “*”); //jsp(java server page)的写法
header(“Access-Control-Allow-Origin：*”); //php的写法
//第二个参数*:表示所有的跨域请求都可以；也可以是某个域名或者用逗号隔开的域名列表。十二.面试题
①请问jsonp是不是ajax中实现跨域访问的技术
jsonp不是AJAX中实现跨域访问的技术 1、jsonp没有使用XMLHttpRequest对象。 2、jsonp只是在一种跨域的技巧。 3、jsonp只支持Get方式
由于按照jsonp的这种方式跨域访问时，就是可以利用javascript和服务器端交互，能达到AJAX中XMLHttpRequest对象同样的效果。所以，人们总是把 jsonp和AJAX联系在一起，这个面试题也是看看你是不是在不懂原生JS，而直接用的jQuery。
②jsonp和json的区别？
1、jsonp和json根本就没有关系，不是同类型的技术 2、jsonp是跨域访问的技巧 3、json是描述数据的格式，经常用于在网络上传输数据的格式，如：前后端交互时，会用json