day26_缓存（cookie，storage,留言板，模拟登录注册）

傷城~ 2024-04-19 10:03 48阅读 0赞

### 知识点 ###

1.  `touchmove`:网页端无效，切换成移动端才会触摸鼠标同时有效；  
    修改方式：将事件添加到body中（例：多媒体案例）
2.  旋转等样式不同浏览器中不同，例如火狐中的`range`（滑动条）默认是竖直方向
3.  `cookie`等缓存是一对一或者一对多的情况，例如旅游前浏览多个地点的信息，再次打开页面时出现所有地点，但是根据输入内容确定键值对应的具体内容  
    例如在留言板案例中，`localstoration`的`setItem()`的第一个值如果是定值如下图，就会一直覆盖之前内容，而时间一直在变化，所以使用时间设置缓存则会一直更新

> 修改前：localStorage.setItem(“data”, JSON.stringify(data));

![在这里插入图片描述][20190917000245246.png]

> 修改后：localStorage.setItem(time.getTime(), JSON.stringify(data));

![在这里插入图片描述][20190917000328995.png]  
4.定义空的json对象，可以是\[\]或者\{\}

### cookie ###

1.  **用来缓存用户信息，可以读取也可以设置**
2.  **缓存**
    
    1.  由键值对组成，内容包括一组必要的值`name=value`再加上另外两个可选值`expire=data;path=path;`
    2.  新建，每次都是建立一个新的值，上一个值不会被覆盖，但是如果当前建立的`cookie`和之前的`cookie`的`name` 名重复，则会更改覆盖上次的内容
    3.  删除，没有办法直接删除`cookie`，但是因为`cookie`有一个**有效时间**，时间如果处于过期状态则当前`cookie`不生效，相当于删除；默认不设置时间则关闭浏览器的时候已经过期；并且失效时间是以天为单位计数，即如果只是小时上的过期数据不会被删除

3.**读取**  
以分号为间隔截取出每一条数据，假设取第一条数据的内容，再以等号为间隔取出json数据（**？**）  
4.**数据的条数（长度）**！= `document.cookie.length`;因为  
`document.cookie`为字符串，输出的内容为字符串长度![在这里插入图片描述][20190917000618570.png]  
可以使用`document.cookie.split(";").length`因为  
![在这里插入图片描述][20190917000644334.png]  
**代码**

var time=new Date();
    // console.log(time); /*Sat Sep 14 2019 16:01:08 GMT+0800 (中国标准时间)*/
    
        /*设置*/
        document.cookie="src=小红;expires=Sat Sep 13 2019 12:01:08 GMT+0800";
        document.cookie="name=小明;expires=Sat Sep 14 2019 16:01:08 GMT+0800";
        /*读取*/
        var json=[];
        var data=document.cookie.split(";");
    
        for(var i=0;i<data.length;i++){ 
            var data1=data[i].split("=");
            for(var k=0;k<data1.length;k++){ 
                json[data1[k]]=data1[k+1];
            }
        }
        console.log(json);

### storage ###

1.  `localStorage` 硬盘存储 （ 本地缓存 类似cookie `一直都在`）  
    `sessionStorage` 浏览器端缓存（`浏览器关闭之后清空`）
2.  接口：

>  *  setItem() 设置缓存
>  *  getItem()
>  *  length 有多少条
>  *  key 通过索引获取对应条数的键
>  *  clear() 清除缓存
>  *  removeItem 清除指定

1.  有`length`属性！而cookie没有
2.  清除指定元素时通过`key`下的字符串删除  
    ![在这里插入图片描述][20190917001333707.png]

localStorage.setItem("name","小花");
        var data=localStorage.getItem("name");//小花
    
    // var index=localStorage.key(0);//name
    // localStorage.clear();
        localStorage.removeItem("name");
        var len=localStorage.length;//1
        console.log(len);

### 留言板 ###

**知识点**

> 1.  `textarea`禁用大小变化为：`resize:none`
> 2.  在使用前先清空之前存在`local storage`内的内容

**设计思路**

1.  点击留言后将输入的值存入`local storage`中，为了避免一对一，应使用动态变化的`key`对应的字符串，如：当前时间,将json数据转换成字符串类型存储
2.  读取数据，注意应该从后往前读，将字符串转换为json类型
3.  动态创建div，将读取到的内容动态追加到内容框中
4.  在函数之前要调用一次函数才能将之前输入过的留言在下一次打开浏览器时仍然存在

**实现功能**  
![在这里插入图片描述][20190917001934544.gif]  
**待解决**

> 不知道为什么，再往localstorage存数据时第2条之后位置就会改变（不再是按照时间数序往后添加），导致在留言板上的显示顺序也很乱（而不是最后的留言在最上面）

**js代码**

### 模拟登录注册 ###

##### 实现功能 #####

如果缓存中有数据，即上一次输入时选择“记住我”，则在网页刷新时显示该条数据，如果没有则再次输入并选择是否“记住”。因为是一对一的模式，所以存储时存储在同一位置，覆盖上次内容即可

##### 设计思路 #####

1.  信息需要提交所以属于表单事件（`<form action=""></form>`）  
    **html部分**

1.  在`onsubmit`提交事件中写入缓存（如果按钮选中，否则`return false`）,写入缓存时先将json对象转换为字符串型

// localStorage.clear();
        /*表单提交存储当前元素*/
        formLogin.onsubmit = function () { 
            var n = num.value;
            var p = pwd.value;
            if (ckbox.checked) { 
                var data = { 
                    "number": n,
                    "password": p
                }
                localStorage.setItem("user",JSON.stringify(data));
            }
            return false;
        }

1.  页面刷新`onload`事件中读取数据存入缓存，存入之前先将字符串数据转换为json对象类型

/*网页刷新显示数据*/
        window.onload=function(){ 
            var user=JSON.parse(localStorage.getItem("user"));
    // console.log(user);
            num.value=user.number;
            pwd.value=user.password;
        }

css样式

##### 实现效果 #####

![在这里插入图片描述][20190917203814399.gif]

[20190917000245246.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ccd662fa9064402aac577544266e11c1.png
[20190917000328995.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/52276ab0c1f54b78aea7c3651122d192.png
[20190917000618570.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bf29b3b1078a4abebe7f05db6c1159e3.png
[20190917000644334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d62573362e8b4d7a929c4fab20a60fac.png
[20190917001333707.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1ce6c6fd707f4b93b329a2613aead183.png
[20190917001934544.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/15fe5cf0522d464d8e542e90fa623d15.gif
[20190917203814399.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/312b06df7ab247c79bc3b725af03000f.gif