JavaScript - Cookie

课程大纲

1.http协议

2.cookie的概念

3.cookie的基本操作

4.cookie的封装

HTTP协议

超文本传输协议，用于从web服务器传输超文本到本地浏览器的传输协议，它是一个无状态的协议，属于应用层协议

cookie的概念

指缓存在本地客户端的数据

cookie的基本操作

基本操作包括增、删、改、查

具体的我们来编写看一下：

此时运行结果为

如果当我们把设置cookie的语句删除了，在浏览器中刷新还会仍然有username=honny

只有当我们关闭浏览器后，再重新打开，cookie才会不显示效果

cookie的有效期设置

我们可以设置cookie的有效期

cookie的修改

同名的cookie会被覆盖

运行结果如下：

此时就只会显示重新设置的cookie

cookie的删除

cookie操作的封装

setCookie( );

getCookie( );

removeCookie( );

设置cookie的值

运行结果如下：

这是我们刚刚设置的两条记录

获取某一个name对应的值封装

首先我们需要对它处理，中间有一个分号加空格

通过两次字符串分割的方法把它们转化成数组，获得name的值

运行结果如下：

这就会只获取到了name1 的name值

删除cookie的封装：

运行结果如下，删除后就找不到返回undefined：

我们还是把写好的封装函数放在之前的tool.js文件中

七天免登录小案例

补充一个小知识：label标签

用户名

< input type="text" value="请输入用户名" id="user" />

这样，用户只要点击“用户名”，鼠标的光标就会自动捕获input的焦点

用label标签仅仅是为了提高用户体验，当然你也可以用div，em, p, span等也可以，并没有一个明确的规定

当我们点击登录按钮的时候，判断七天免登陆是否被选中

如果被选中，那么下一次再打开网页时，用户名和密码就 会自动填写

即：将用户名和密码使用cookie保存

先来写body的页面和样式：

再来写script语句

运行结果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web