2023/3/21日笔记

少年别浪
140 阅读2分钟

3-6、Cookie的封装

代码案例

<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>3-6,3-7、Cookie的封装</title>
</head>

<body>
    <button id="cn">中文</button>
    <button id="en">英文</button>

    <script type="module">

        // import { set,get,remove } from './Cookie的封装.js';
        // import { set,get,remove } from './Cookie的封装.js';
        // set('username', 'alex');
        // set('username', 'zs');
        // set('age', 18);
        // set('用户名', '李四');

        // set('sex', 'male', {
        //     maxAge: 30 * 24 * 3600,
        //     // domain: '.imooc.com'
        // })

        // remove('username')
        // remove('用户名')

        // console.log(get('username'));
        // console.log(get('age')); 
        // console.log(get('用户名')); 
        // console.log(get('sex')); 

        // 使用封装好的 Cookie 实现网站语言切换
        import { set } from './Cookie的封装.js';
        const cnBtn = document.getElementById('cn');
        const enBtn = document.getElementById('en');

        cnBtn.addEventListener('click', () => {
            set('language', 'cn', {
                maxAge: 30 * 24 * 3600
            });
            window.location = './3-6,3-7、Cookie的封装.html';
        },false)

        enBtn.addEventListener('click', () => {
            set('language', 'en', {
                maxAge: 30 * 24 * 3600
            });
            window.location = './3-6,3-7、Cookie的封装.html';
        },false)
    </script>
</body>

</html>

3-8、Cookie的注意事项

1.前后端都可以写入和获取 Cookie

2.Cookie 有数量限制

  • 每个域名下的 Cookie 数量有限，每个域名对于 Cookie 的数量限制不一，大概在 20~50 个之间
  • 当超过单个域名限制之后，再设置 Cookie，浏览器就会清除以前设置的 Cookie

3.Cookie 有大小限制

  • 每个 Cookie 的存储容量很小，最多只有 4KB 左右

代码案例

<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>3-8、Cookie的注意事项</title>
</head>
<body>
    <script>
        // 1.前后端都可以写入和获取 Cookie

        // 2.Cookie 有数量限制
        // 每个域名下的 Cookie 数量有限，每个域名对于 Cookie 的数量限制不一，大概在 20~50 个之间
        
        // 当超过单个域名限制之后，再设置 Cookie，浏览器就会清除以前设置的 Cookie

        // 3.Cookie 有大小限制
        // 每个 Cookie 的存储容量很小，最多只有 4KB 左右
    </script>
</body>
</html>

4-1、初识localStorage

1.localStorage 是什么

  • localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
  • 单个域名下的 localStorage 总大小有限额

2.在浏览器中操作 localStorage

3.localStorage 的基本用法

  • setItem()
  • length
  • getItem()
    • 获取不存在的返回 null
  • removeItem()
    • 删除不存在的 key，不报错
  • clear()

代码案例

<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>4-1、初识localStorage</title>
</head>

<body>
    <script>
        // 1.localStorage 是什么
        // localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
        // 单个域名下的 localStorage 总大小有限额

        // 2.在浏览器中操作 localStorage 

        // 3.localStorage 的基本用法
        // console.log(localStorage);

        // setItem()
        localStorage.setItem('username', 'alex');
        localStorage.setItem('username', 'zs');
        localStorage.setItem('age', 18);
        localStorage.setItem('sex', 'male');

        // length
        // console.log(localStorage.length);

        // getItem()
        console.log(localStorage.getItem('username'));
        console.log(localStorage.getItem('age'));
        console.log(localStorage.getItem('sex'));

        // 获取不存在的返回 null
        // console.log(localStorage.getItem('name'));

        // removeItem()
        // localStorage.removeItem('username');
        // localStorage.removeItem('age');

        // 删除不存在的 key，不报错 
        // localStorage.removeItem('name');

        // clear()
        // localStorage.clear();

        console.log(localStorage);

    </script>
</body>

</html>

4-2、使用localStorage实现自动填充

代码案例

<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>4-2、使用localStorage实现自动填充</title>
</head>

<body>
    <form id="login" action="#" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="登录" id="btn">
    </form>
    <script>
        // 使用localStorage 实现自动填充
        const suBtn = document.getElementById('btn');
        const loginForm = document.getElementById('login');

        const username = localStorage.getItem('username');
        if (username) {
            loginForm.username.value = username;
        }

        suBtn.addEventListener('click', e => {
            e.preventDefault();
            // 数据验证

            // console.log(loginForm.username.value);
            localStorage.setItem('username', loginForm.username.value);

            loginForm.submit();
        }, false)
    </script>
</body>

</html>

4-3、localStorage的注意事项

1.localStorage 的存储期限

  • localStorage 是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的
  • sessionStorage
    • 当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空

2.localStorage 的键和值的类型

  • localStorage 存储的键和值只能是字符串类型
  • 不是字符串类型，也会先转化成字符串再存进去

3.不同域名下能否共用 localStorage

  • 不同的域名是不能共用 localStorage 的

4.localStorage 的兼容性

  • IE7 及以下版本不支持 localStorage，IE8 开始支持

代码案例

<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>4-3、localStorage的注意事项</title>
</head>

<body>
    <script>
        // 1.localStorage 的存储期限
        // localStorage 是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的

        // sessionStorage
        // 当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空
        // sessionStorage.setItem('username', 'alex');
        // sessionStorage.getItem('username');
        // sessionStorage.removeItem('username');
        // sessionStorage.clear();
        // sessionStorage.setItem('username', 'alex');

        // 2.localStorage 的键和值的类型
        // localStorage 存储的键和值只能是字符串类型
        // 不是字符串类型，也会先转化成字符串再存进去

        // localStorage.setItem({},18)
        // // localStorage.setItem('students',[{},{},{}])
        // console.log(typeof localStorage.getItem('[object Object]'),localStorage.getItem('[object Object]'));
        
        // console.log({}.toString());
    
        // 3.不同域名下能否共用 localStorage
        // 不同的域名是不能共用 localStorage 的

        // 4.localStorage 的兼容性
        // IE7 及以下版本不支持 localStorage，IE8 开始支持

        // caniuse.com
    </script>
</body>

</html>

5-1、初识Ajax

1.Ajax 是什么

  • Ajax 是 Asynchronous JavaScript and XML （异步 JavaScript 和 XML）的简写
  • Ajax 中的异步：可以异步地向服务器发送请求，在等待的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
  • XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
  • XML 现在已经不怎么用了，现在比较常用的是JSON
  • Ajax 其实就是浏览器与服务器之间的一种异步通信方式
  • 使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新
    • 注册检测
    • 搜索提示

2.搭建 Ajax 开发环境

  • Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax
    • Live Server
    • windows phpStudy
    • Mac MAMP

代码案例

<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>5-1、初识Ajax</title>
</head>
<body>
    <script>
        // 1.Ajax 是什么
        // Ajax 是 Asynchronous JavaScript and XML （异步 JavaScript 和 XML）的简写

        // Ajax 中的异步：可以异步地向服务器发送请求，在等待的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据

        // XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式

        // XML 现在已经不怎么用了，现在比较常用的是JSON

        // Ajax 其实就是浏览器与服务器之间的一种异步通信方式

        // 使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

        // 注册检测
        // 搜索提示

        // 2.搭建 Ajax 开发环境
        // Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax

        // Live Server

        // windows phpStudy
        // Mac MAMP

    </script>
</body>
</html>
avatar
文章
阅读
粉丝