js day10 cookie

最新推荐文章于 2023-03-14 17:04:45 发布

QiuShuiFuPing

最新推荐文章于 2023-03-14 17:04:45 发布

阅读量183

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qiushuifuping/article/details/87900672

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

通信协议
通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。
在计算机通信中，通信协议用于实现计算机与网络连接之间的标准，网络如果没有统一的通信   协议，电脑之间的信息传递就无法识别。通信协议是指通信各方事前约定的通信规则，可以简   单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时，必须使   用的通信协议。
TCP/IP
Transmission Control Protocol/Internet Protocol的简写，中译名为传输控制协议/因特网互   联协议，又名网络通讯协议，是Internet最基本的协议、Internet国际互联网络的基础，由网   络层的IP协议和传输层的TCP协议组成。TCP/IP 定义了电子设备如何连入因特网，以及数据   如何在它们之间传输的标准。
HTTP
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络   协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和   接收HTML页面的方法。
HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网   站。通过使用Web浏览器、网络爬虫或者其它的工具，客户端发起一个到服务器上指定端口（默   认端口为80）的HTTP请求。
前端面试题1：一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
前端面试题2：HTTP和HTTPS的区别
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），   这个时候，就成了我们常说的HTTPS。默认HTTP的端口号为80，HTTPS的端口号为443。
COOKIE   的概念
Cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件，它可以包含相关用户的信息。无论何时用户链接到服务器，Web站点都可以访问Cookie信息。
比如：自动登录、记住用户名，记住一些和用户相关的信息等
cookie的特点
禁用Cookie后，无法正常登陆。
cookie是与浏览器相关的，不同浏览器之间所保存的cookie也是不能互相访问的；
cookie可能被删除。因为每个cookie都是硬盘上的一个文件；
cookie安全性不够高。
cookie的常见使用
保存用户登录状态。
跟踪用户行为。
定制页面。
创建购物车。
cookie的使用及封装
Cookie名称和值可以由服务器端开发自己定义。
如果cookie不存在，输出undefined.
添加cookie
document.cookie=‘key = value ; expires=过期时间’;
获取cookie
document.cookie
删除cookie
将cookie的过期时间设为一个过去的时间。
了解XSS攻击(cross site script:跨站脚本攻击)
XSS攻击全称跨站脚本攻击，是为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
如何预防xss攻击：
用户的输入(url)要进行过滤。后端对你传入的内容一定进行过滤。对于输出进行转义。
加密方式：Md5/SHA1
数组、对象cookie的存储和访问。
1、JSON.parse 函数
作用：将 JavaScript 对象表示法 (JSON) 字符串转换为对象，具有json格式检测功能。
2、JSON.stringify()函数
作用：将 JavaScript 值转换为 JavaScript 对象表示法 (JSON) 字符串
3、eval()函数---性能不及JSON.parse(),安全性不好。
作用：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
eval()在解析代码时还要用一对圆括号将字符串包起来。其目的是迫使eval函数在处理       JavaScript代码的时候强制   将括号内的表达式转化为对象，而不是作为语句来执行。
例如：eval("{}") 和 eval('('+'{}'+')')
强化练习
1．一周内免登陆。
2．记录图片位置。
3．照片墙的记录。
综合应用
1 . 购物车的操作。

1、encodeURI/decodeURI
encodeURI:方法返回一个已编码的 URI。如果将编码结果传递给 decodeURI，则将返回初始的字符串。encodeURI 不对下列字符进行编码：“:”、“/”、“;”和“?”。请使用 encodeURIComponent 对这些字符进行编码
decodeURI:从用encodeURI方法编码的String对象中返回已解码的字符串
例外字符：! @ # $ & * ( ) = : / ; ? + '
2、encodeURIComponent/decodeURIComponent
encodeURIComponent:encodeURIComponent 方法返回一个已编码的 URI。如果将编码结果传递给decodeURIComponent，则将返回初始的字符串。因为 encodeURIComponent 方法将对所有字符编码
decodeURIComponent:从用encodeURIComponent方法编码的String对象中返回已解码的字符串
例外字符：! * ( ) '

补充：

当ul的总宽度不想计算时，可以先设大概值，然后用浏览器的f12下调

cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

以字符串的方式存键值对

cookie是客户端和服务器之间的，cookie本地娶不到

安装了http-server服务器，并用自带的编辑器打开页面，在下方终端处输入命令，打开服务器

终止命令ctrl+c

若8080端口被占用了，则利用hs -o -p 8888

一次会话过程是指打开直到关闭

cookie可以多次赋值，不会覆盖，会自动用“；”+空格来分开

后台传递的数据一般是json类型的；

以后键都加引号

1，

get.onclick = function() {
console.log(document.cookie);
}
}
</script>

get.onclick = function() {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var item = arr[i].split('=');
if (item[0] == 'username') {
console.log('用户名:' + item[1]);
}
}
}
}
</script>
</head>

<body>
<button id="set">存</button>
<button id="get">取</button>
<script>
set.onclick = function() {
document.cookie = 'data=' + JSON.stringify(data);
alert('存好了');
}
get.onclick = function() {
var str = document.cookie;
var arr = str.split('; ');
for (var i = 0; i < arr.length; i++) {
var item = arr[i].split('=');
if (item[0] == 'data') {
var d = JSON.parse(item[1]); //将JSON字符串转换成JSON对象或JSON数组
console.log(d);
}
}
}

// JSON.stringify() 将JSON对象转换成JSON字符串，JSON字符串的key都需要带引号
</script>
</body>
6.

<body>
<button id="set">存</button>
<button id="del">删</button>
<script>
var set = document.getElementById('set');
var del = document.getElementById('del');
set.onclick = function() {
var d = new Date();
d.setDate(d.getDate() + 2);
document.cookie = 'username=zhangsan;expires=' + d;
}

del.onclick = function() {
document.cookie = 'username="";expires=-1';
}
</script>
</body>

for (var i = 0; i < ls.length; i++) {
console.log('key:' + ls.key(i) + ' value:' + ls.getItem(ls.key(i)));
}

// var ss = sessionStorage;
</script>

<body>
       <form action="xss.php" method="post">
           请输入用户名：<input name="username" autocomplete="off" value="" /><br/>
           <input type="submit" value="提交" />

       </form>

       
       <script type="text/javascript">
           var inp=document.querySelector('input');
           inp.οnblur=function(){
               this.value=encodeURI(inp.value);
           }
       </script>
   </body>

<body>
       <fieldset id="" style="width:600px;">
           <legend>用户登录</legend>
           <p>
               <label for="">姓名：</label>
               <input type="text" id="username" autocomplete="off" />
           </p>
           <p>
               <label for="">密码：</label>
               <input type="password" id="password" />
           </p>
           <p>
               <input type="checkbox" id="check" />记住用户名和密码
           </p>
           <p>
               <input type="button" id="btn" value="登陆" />
           </p>

       </fieldset>
       <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
       <script src="md5.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           var username=document.querySelector('#username');
           var password=document.querySelector('#password');
           var remember=document.querySelector('#check');
           var btn=document.querySelector('#btn');

           //判断cookie是否存在
           if(getcookie('user') && getcookie('pass')){
               username.value=getcookie('user');
               password.value=getcookie('pass');
               remember.checked=true;
           }


           btn.οnclick=function(){
               if(remember.checked){//选中
                   addcookie('user',username.value,7);
                   addcookie('pass',hex_md5(password.value),7);
               }else{
                   delcookie('user');
                   delcookie('pass');
               }
           }

       </script>
   </body>

<head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           img{
               width:300px;
               position: absolute;
           }
       </style>
   </head>
   <body>
       <img src="../Day 08/img/2.jpg" alt="" />
       <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">

           var oImg=document.querySelector('img');

           if(getcookie('x') && getcookie('y')){
               oImg.style.left=getcookie('x')+'px';
               oImg.style.top=getcookie('y')+'px';
           }
           function drag(obj){
               var sx=0;
               var sy=0;
               obj.οnmοusedοwn=function(ev){
                   var ev=ev||window.event;
                   sx=ev.offsetX;
                   sy=ev.offsetY;
                   document.οnmοusemοve=function(ev){
                       var ev=ev||window.event;
                       obj.style.left=ev.clientX-sx+'px';
                       obj.style.top=ev.clientY-sy+'px';
                   };
                   document.οnmοuseup=function(){
                       document.οnmοusemοve=null;
                       document.οnmοuseup=null;
                       addcookie('x',obj.offsetLeft,10);
                       addcookie('y',obj.offsetTop,10);
                   }

                   return false;//取消默认行为。
               }
           }
           drag(oImg);
       </script>
   </body>

function addcookie(key,value,days){
   var d=new Date();
   d.setDate(d.getDate()+days);
   document.cookie=key+'='+encodeURIComponent(value)+';expires='+d;
}

function delcookie(key){
addcookie(key,'',-1);
}