cookie XSS跨站脚本攻击 localStorage sessionStorage

cookie

1、根据域名和路径进行存储
2、只能存储文本信息
3、只存储在指定的位置，不能随意改变位置
4、cookie后来都做了加密隐藏处理，现在无法直接找到cookie文件内容
5、cookie只能做临时存储，如果关闭浏览器，数据将会丢失

在cookie使用中，主要用于前后端不分离，如果前后端分离，使用AJAX发送时是不同的前后端不分离时，cookie会被自动携带发送到服务端，前后端不分离通信时，cookie会随着访问自动往返发送cookie内容不能存储太多，如果是ajax发送，cookie就不会自动携带发送

document.cookie="user=lu";
document.cookie="age=30";
document.cookie="sex=man";
console.log(document.cookie);
lu
//设置cookie的生存期
var date=new Date();
date.setHours(date.getHours() + (24 * 30)); //保存30天
document.cookie="user=lu;expires="+date.toUTCString();

XSS跨站脚本攻击

XSS 实现
1、必须允许用户输入文本内容的情况，并且将这个输入的文本内容可以发送到服务器
2、服务器必须存储了这个发过来文本内容，并且将这个文本内容展示在页面中
3、这个文本内容必然包括了script脚本，在用户打开页面时这段script被执行
可以将当前用的cookie盗取后发送到指定的服务器存储

当在输入框中写入 后，点击提交，页面会执行提交的 script 脚本，这样就可以获取到当前用户页面中存储的 cookie了。
如果解决这类问题

    1、文本内容提交前将script用正则去提取出来转义（替换为任何其他非脚本文字）然后在发送给服务器
    2、服务器在返回客户端存储的时候生产页面需要做判断处理查看是否有XSS攻击，然后做转义处理
    3、还需要判断所有提交标签中href中是否含有JavaScript内容，也要做转义

WebStorage

WebStorage 分为localStorage（本地存储）和sessionStorage（会话存储）；

localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
sessionStorage：会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁；
localstorage 在不同的浏览器下，是不互通的；
sessionStorage 在不同窗口、不同标签页是不互通的；
localStorage 和 sessionStorage的操作语法相同。

给 window 监听 storage 事件，可以用来不同页面间的通信，可以获取到 storage 现在的值和过去的值：

//创建localStorage
localStorage.user="xiaoming";
localStorage["user"]="xiaoming";
localStorage.setItem("user","xiaoming");

//获取localStorage
console.log(localStorage.user);
console.log(localStorage["user"]);
console.log(localStorage.getItem("user"));

//删除localStorage
delete localStorage.user;
localStorage.removeItem("user");

//清除所有localStorage存储
localStorage.clear();

localStorage、sessionStorage与cookie的区别

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下，而localStorage和sessionStorage不区分目录。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，如果不设置过期时间，则当浏览器关闭时自动销毁，。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。
WebStorage 的 api 接口使用更方便。