Cookie和webstorage本地储存
Ⅰ- 壹 - Cookie本地储存
一 什么是Cookie
cookies是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件，它和你的网络浏览行为有关，所以存储在你电脑上的cookies就好像你的一张身份证，你电脑上的cookies和其他电脑上的cookies是不一样的;cookies不能被视作代码执行，也不能成为病毒，所以它对你基本无害。cookies的作用主要是，当你访问了某些网页，并且对网页的一些设置进行修改，cookies就能跟踪并记录到这些修改，当你下一次访问这个网页的时候，这个网页会分析你电脑上的cookies，一般用于登录缓存信息和购物车缓存
二 Cookie 的特点和缺点
特点
-
cookie必须运行在服务器的环境下(开启服务器)
-
cookie的容量: 5kt
-
cookie存储的数据类型:字符串
-
Cookie本地数据储存，公共存储空间，之前会保存在c盘下，现在会被隐藏
-
Cookie只能作为临时存储，当浏览器关闭，就会丢失
-
Cookie的作用域为当前域，有文件夹路径的区分，域中的文件夹储存
-
http://www.xxx.com/在这个域中任何文件都可以写cookie,存储的位置都是以这个域作为存储空间，别的域不可以访问
http://www.xxx.com/index.html为顶级域无法访问http://www.xxx.com/paimai/index.html顶级域无法向下访问，可以向上访问 -
一-个域名下存放的cookie的个数是有限制的，不同浏览器
存放的个数不一样，cookie能 存储的条目数为:50条。
如果想长时间存放一个cookie，同时需要设置一个过期时间
-
-
Cookie数据跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容（js代码都是针对当前页面的）
缺点
- cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
- cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
- cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
- cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
在浏览器中查看已经储存的cookie
浏览器查看cookie F12 =>Application =>
三 创建cookie和获取cookie
一个网站可以创建多个cookie，不同的cookie可以拥有不同的值，名字相同会覆盖掉
//单个设置cookie
document.cookie="name=nihao";
document.cookie="name=zhangsan";//会覆盖掉上一个cookie
//获取单个cookie
console.log(document.cookie);
四 设置cookie的过期时间
在不设置过期时间的cookie在未关闭浏览器的时候会一直存放，浏览器关闭，就会丢失掉。设置过期时间必须要用date.toUTCString()
var date=new Date();
date.setMinutes(6);
document.cookie="name=xietian;expires="+date.toUTCString();
五 Cookie的操作
1 获取cookie
getCookie(){
return document.cookie.split(/;\s*/).reduce((value,item)=>{
var arr=item.split("=");
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return value;
},{
})
}
2 根据key获取cookie的值
getCookieValue(){
return getCookie()[key];
}
3 设置cookie的值，第三个参数为过期时间
setCookie(key,value,date){
if(!date){
document.cookie=`${
key}=${
value}`;
return;
}
document.cookie=`${
key}=${
value};expires=${
date.toUTCString()}`;
}
4 设置多个cookie
setCookies(obj,date){
for(var key in obj){
Utils.setCookie(key,obj[key],date);
}
}
5 删除Cookie
removeCookie(key){
setCookie(key,"",new Date());
}
6 删除所有的cookie
clearCookie(){
for(var key in Utils.getCookie()){
removeCookie(key);
}
}
Ⅱ - 贰 - webstorage本地存储
一 什么是webstorage
类似于cookie 储存量比cookie更大，web storage有自己的方法，不用像cookie需要自己封装，本质为cookie的进阶版
web storage有两个储存数据的接口:
localStorage 和 sessionStorage都是window对象的属性
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
localStorage 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
sessionStorage会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。
localStorage持久化存储，sessionStorage临时存储
二 四个方法使用
| 方法 | 功能 |
|---|---|
| localStorage(sessionStorage).setItem | 存储数据信息到本地 |
| localStorage(sessionStorage).getItem | 读取本地存储信息 |
| localStorage(sessionStorage).removeItem | 删除指定key本地存储的值 |
| localStorage(sessionStorage).clear | 清空网站在本地保存的所有数据的 |
1 setItem()和getItem()
-
setItem()：在本地存储中以key键/值的方式存储数据
-
getItem()：获取本地存储中的数据
localStorage.setItem("name","xietian");
localStorage.getItem("name")
//也可以直接添加对象的方式设置
localStorage.name="xietian";
console.log(localStorage.name);
2 removeItem()和clear()
-
removeItem()：删除指定key本地存储的值
-
clear()：清空网站在本地保存的所有数据的
localStorage.removeItem("name");//删除某个数据
localStorage.clear();//清除所有数据
三 使用注意事项
- 必须是字符串，也只能是字符串
- localStorage不能被爬虫抓取到
- 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
储存数组数据的时候使用
- JSON.stringify(对象)：把对象转换成JSON字符串
- JSON.parse(json串):把json串转化为对象
var arr=[1,2,3];
localStorage.arr=JSON.stringify(arr);
var arr=JSON.parse(localStorage.arr);
console.log(arr);
Ⅳ - 肆 - localStorage、sessionStorage与cookie的区别
-
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
-
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
-
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
-
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
-
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
-
Web Storage 的 api 接口使用更方便。
0 - 0 - 知识点：
一 XSS攻击
XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
能被XSS攻击需要以下两点：
一、需要向web页面注入恶意代码；
二、这些恶意代码能够被浏览器成功的执行。
利用对文本框的内容进行处理 可以预防此类事案发生
var str= `