day23 - Cookie、本地存储localStorage以及XSS攻击

一、Cookie

1.概念：

Cookie是浏览器提供的一个存储数据的空间。
Cookie又叫会话跟踪技术，是由Web服务器保存在用户浏览器上的小文本文件，它可以包含相关用户的信息。无论何时用户链接到服务器，Web站点都可以访问Cookie信息 。
比如：自动登录、记住用户名，记住一些和用户相关的信息等。

2.特点：

1.cookie必须是分域名存储的，也就是说在当前域名下设置的cookie只能在当前域名下获取
2. cookie是有时效性的，默认是会话级别，浏览器关闭就失效
3. cookie分路径的，当前路径下设置的cookie只能在当前路径下使用
4. 储存在浏览器上，不是特别安全 - 不要存储重要数据
5. cookie在浏览器上存储的大小是有限制的 - 通常大小在4kb之内，数量150条左右
6. 禁用cookie后，无法正常注册登录
7. cookie是与浏览器相关的，不同浏览器之间所保存的cookie也是不能互相访问的；
8. cookie可以被删除。因为每个cookie都是硬盘上的一个文件；
9. cookie安全性不够高-xss攻击

3.cookie的操作：

（1）存储cookie:

①给document的cookie属性进行赋值
    document.cookie = '键=值';
    cookie存储是按照键值对的形式存储的；键值相同会覆盖。
    这个数据要是一直存在在浏览器中的话，浏览器的内存会崩溃，所以cookie也会有消失的时候。会话级别(Session) - 浏览器关闭的时候就失效了。
    cookie可以在当前页面设置，别的页面访问，可以跨文件访问的 - 因为存储在同一个浏览器上。
    
②设置cookie的有效期
    document.cookie = '键=值；expires=失效时间';
    cookie识别的时间是格林威治时间，而我们获取到的时间是东8区的时间，所以需要减去8个小时，才是当前时间。
    cookie有路径的限制：在当前文件中设置的cookie，在当前文件夹中可以使用，在别的文件夹中无法使用。
    
③设置cookie的时候可以设置路径
    document.cookie = '键=值；expires=失效时间；path=/';
    这里的"/"在服务器中代表根目录

（2）获取cookie：

document.cookie
    cookie如果不存在，输出undefined
    cookie必须是分域名存储的，也就是说在当前域名下设置的cookie只能在当前域名下获取。

（3）删除cookie

就是将cookie的有效期设置到上一秒
var date = new Date(+new Date()-1000*60*60*8-1); // 当前时间的上一秒
document.cookie = 'name=zhangsan;expires='+date;

4.cookie的封装：

let cookie = {
    get: function (key) {
        //先获取所有cookie；通过；将所有cookie分割
        let arr = decodeURIComponent(document.cookie).split('; ');
        for (let i = 0; i < arr.length; i++) {
            let brr = arr[i].split('=');//通过 = 分割每一个元素
            if (key === brr[0]) {
                return brr[1];
            }
        }
    },
    set: function (key, value, days,path='/') {
        let d = new Date();
        d.setDate(d.getDate() + days)
        document.cookie = `${key}=${encodeURIComponent(value)};expires=${d};path=${path}`;
    },
    unset: function (key) {
        this.set(key, null, -1)
    }
}

二、localStorage

1.概念：

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

2.localStorage的特点：

1. localStorage拓展了cookie的4K限制(5M)，永久存储，除非手动删除。
2. localStorage会将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，但只有在高版本的浏览器中才支持的。
3. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5. 不同的浏览器本地存储不能相互进行访问。
6. sessionstorage会话结束就消失。

3.localStorage的操作：

1.localStorage存储：
//点操作符存储
    window.localStorage.name = 'zhangsan';
//中括号方式存储[]
    window.localStorage['name'] = 'zhangsan';
//利用内置的方法存储
    window.localStorage.setItem('sex', '男');
    
2.localStorage获取
    localStorage.name;
    localStorage['age'];
    localStorage.getItem('objdata');
    
3.localStorage删除
    localStorage.removeItem('name');
    localStorage.clear();//删除所有

4.cookie,locastorage,sessionstorage的区别：

locastorage,sessionstorage是html5新增的。
cookie的4K存储空间;localStorage拓展成了5M，
locastorage是永久存储，除非手动删除。
cookie可以自由设定过期时间;locastorage需要手动删除。
cookie需要服务器。

三、XSS攻击

XSS（Cross Site Script）攻击 全称 跨站脚本攻击。
XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript。

总结：输入过滤、输出转义。