cookie

今天来总结一下cookie

cookie的作用是什么呢？临时存储，是本地计算机的临时存储

原因：网页关闭时，程序已经关了

 

cookie最重要的两点就是存储和获取，举例如下：

//document.cookie="a=3";

console.log(document.cookie);//获取coookie

var a=Number(document.cookies.split("=")[1]);//把a=3切分开，取第一项

a++；

document.cookies="a="+a;//存储cookie

 

那么存储到本机有什么好处？

cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。

页面用来保存信息.
比如:自动登录  用户名

 

cookie的功能: 在浏览器中进行数据的存储,用户名、密码

cookie的主要作用是保存信息，并与服务器互动，因此在很多情况下都可以使用到cookie。
密码 cookie：访当问者首次访问页面时，也许会填写密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

 

cookie特性：

cookie必须运行在服务器的环境下（开启服务器），aiax也是

cookie的容量: 5kb     只针对当前的文件夹能存储5kb   如果换一个文件夹，那么又可以存储5kb
cookie存储的数据类型: 字符串      （a=一个值，b=一个值）这样的方式
cookie存放以域名形式区分的。    不同域名的存储是无法共享的，即不能相互调用
一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。
如果想长时间存放一个cookie，同时需要设置一个过期时间
Cookie默认是临时存储的，当浏览器关闭时，自动销毁

 

cookie的缺点：

cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

 

cookie的生命周期：

在默认情况下，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。
document.cookie = “名称=值；expires=” + 时间；（时间必须是一个字符串）
var d= new Date();
d.setHours(d.getHours() + (24 * 30)); //保存一个月
document.cookie = "visited=yes; expires=" + d.toUTCString();

举例：

//var date =new Date();

//date.setMinutes(11);

//document.cookie="a=3;expires=" + date.toUTCString();

console.log(document.cookie);

var a=Number(document.cookie.split("=")[1]);

a++;

document.cookie="a="+a+";expires=" + date.toUTCString();

以上例子只针对于浏览器默认情况下，没有设置无痕，清除cookie,清除浏览记录等操作。

 

 

搜索的东西会保存在cookie中，在打开网址或者提交表单时，自动裹挟着cookie数据发送到服务器，并且服务端程序可以裹挟着新的服务端内容存储在电脑的cookie中，cookie存在域，每个域独立存在，不能跨域名存储。（例如每个人打开淘宝首页显示的不一样）

 

那么有的网页没有搜索也会弹出东西，原因是实际上是百度的网页，显示的是对应网站的一个iframe   

例如163网站里面没有搜索，但是会弹出别的网页，其实是百度给了163一个iframe,弹出的网页实际上是百度获取了用户的cookie

 

 

京东网站没有登录也能实现加入购物车功能，关闭网站之后，购物车里面的东西还存在，原因就是被保存到本地的cookie中了

登录之后，购物车中东西依然存在

 

如何加密存储？

首先引入js文件，然后

var name="wjs";

var password="12345"

password=hex_md5(password);

console.log(password);

 

上面的加密例子不能进行解密

为什么不需要解密原因是  用户端和服务器端都进行加密    同样的字符串再进行解密

 

 

多次加密，安全，不容易被比对出来：

password=hex_md5(hex_md5(hex_md5(hex_md5(hex_md5(password)))));

 

 

如何多个内容存储？

 

 一般考虑是给里面放多个对象，然后把对象存储在里面，例如下面的obj对象，里面有三条信息

 希望将对象存到数据里面  ，写一个函数setCookie ,把需要存储的对象放进来，设置一个时间过期时间（有的需要过期时间，有的不需要过期时间），date是全局过期时间，过期时间需要转换为字符串加在后面

   var obj={

            user:"xietian",

            age:30,

            sex:"男"

        }

        function setCookie(obj,date){

           //遍历对象

 

            for(var prop in obj){

                //prop是属性，就是将对象中的属性（user、age、sex)分别作为属性名，（属性名=值）， 

                   这时就相当于把所有的数据存在了cookie当中，如果有过期时间就加上，如果没有过期时间就加一个“”，这样就相当于把一个cookie设置好了

                document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");

            }

        }

 

 1、    setCookie(obj);

 

 

 

 

  2、     如果需要对调存的数据做一个时间，就要设置一个时间

       var date=new Date();

        date.setFullYear(2022);

        setCookie(obj,date);

 

 

3、兼容上面操作，一种是key,value一种是obj方式来写，这就是设置一个值或者一个对象多个值的

        function setCookie1(key,value,date){

                document.cookie=key+"="+value+(date ? ";expires="+date.toUTCString() : "");

        }

        

 

如何读取多个数据？

 

for in  应用于遍历对象

for of  应用于map

 

复习一下之前，用之前学过的的知识点实现读取多个数据

 

 

重设值可以清楚过期时间

 

 

 

 

XSS攻击

全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

 

 

 

 

 

 

 // XSS 攻击

            // 1、必须是同一个域当中页面的表单提交，必须有文本内容提交

            // 2、提交的内容需要被放置在页面中，例如评论等内容

            // 3、在提交的文本中出现script标签，并且这个标签没有被替代，直接放入在页面中

            // 4、这个页面可以被所有用户查看到

            // 5、这个script标签具备一定的盗窃cookie特征

     

            // 解决方案

            // 提交页面时将script标签去除提交

                   // 可以通过插入图片的超链接，点击是执行JavaScript脚本

                //    遇到这种时就需要将JavaScript脚本替换

 

 

 

前后端不分离，在同一个域中

 

 

 

 

 xss.html提交内容携带了cookie,所以php中有php

 

 

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 接口使用更方便。