JavaScript学习笔记（9.5）

最新推荐文章于 2024-05-21 19:09:41 发布

mez_Blog

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量139

点赞数 1

分类专栏：前端 HTML5 JavaScript 文章标签： javascript 学习服务器开发语言前端

本文链接：https://blog.csdn.net/mez_Blog/article/details/129682449

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

cookie的特点

1.只能存储文本

2.单条存储有大小限制4KB左右

数量限制（一般浏览器，限制大概在50条左右）

3.读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名可进行读取。简单的将就是，那个服务器发给你的cookie，只有哪个服务器有权利读取

4.时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间

5.路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-21 08:49:36
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-21 09:59:17
 * @FilePath: \vscode\cookie.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="savebtn">存储</button>
    <button id="getbtn">获取</button>
    <button id="delbtn">删除</button>
    <script>
        // http协议无状态
        //localStorage：用户名密码   token钥匙 ==》Nodejs token认证
        //cookie 本地存储  sessionID钥匙==》Nodejs  cookie+session

        //
        savebtn.onclick=function(){
           
            //过期时间设置
            var date=new Date()//UTC时间-8小时
            date.setMinutes(date.getMinutes()+15)
            document.cookie=`user=Tom;expires=${date.toUTCString()}`
            document.cookie=`username=test;path=/vscode/1;expires=${date.toUTCString()}`
            document.cookie=`age=10;expires=${date.toUTCString()}`
        }

        getbtn.onclick=function(){
            console.log(getCookie("age"))
            // getCookie()
        }

        function getCookie(key){
            var str=document.cookie
            var arr=str.split("; ")
            console.log(arr)
            var obj={}
            for(var i=0;i<arr.length;i++){
                var subArr=arr[i].split("=")
                console.log(subArr)
                console.log(subArr[0])
                obj[subArr[0]]=subArr[1]
            }
            return obj[key]

        }
        //修改cookie即是同名覆盖

        //删除cookie（重新设置删除时间）
        delbtn.onclick=function(){
            var date=new Date()//UTC时间-8小时
            date.setMinutes(date.getMinutes()-1)
            document.cookie=`user=123;expires=${date.toUTCString()}`
            document.cookie=`age=123;expires=${date.toUTCString()}`
            document.cookie=`username=123;expires=${date.toUTCString()}`
        }
    </script>
</body>
</html>

jsonp

jsonp(JSON with Padding)是json的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

同源策略：同域名，同端口号，同协议

不符合同源策略，浏览器为了安全，会阻止请求

解决方案：

1.cors 由后端设置：Access-Control-Allow-Origin:*

2. jsonp :前后端协作

jsonp原理：动态创建script标签，src属性指向没有跨域限制

指向一个接口，接口返回的格式一定是***（）函数表达式

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-21 10:13:05
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-21 10:42:56
 * @FilePath: \vscode\jsonp.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-21 10:13:05
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-21 10:36:32
 * @FilePath: \vscode\jsonp.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="mybtn">
        jsonp
    </button>
    <script>
        // fetch("")
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res)
        // })
        function test(obj){
            console.log(obj)
        }
        // test({name:"mez"})
        // var oscript
        mybtn.onclick=function(){
            var oscript=document.createElement("script")
            oscript.src="01.txt"  //未来地址
            document.body.appendChild(oscript)
        }
    </script>
    <!-- <script src="01.js">
        // test({name:"mez"})
    </script> -->
</body>
</html>

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记（9.5）

4.时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间。3.读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名可进行读取。简单的将就是，那个服务器发给你的cookie，只有哪个服务器有权利读取。5.路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。数量限制（一般浏览器，限制大概在50条左右）2.单条存储有大小限制4KB左右。
复制链接

扫一扫