【免费】JavaScript基础篇——浅谈cookie资源-CSDN文库

需积分: 0 118 浏览量更新于2016-04-23 收藏 15KB DOCX 举报

### JavaScript基础篇——浅谈cookie #### 一、引言在Web开发中，如何保持用户的登录状态或记住用户的一些个性化设置是一个常见的需求。对于这种轻量级的数据存储需求，`cookie`是一种非常实用的技术。它能够帮助开发者实现对用户信息的持久化存储，即使在用户关闭浏览器之后也不会丢失这些数据。 #### 二、什么是Cookie？ `Cookie`本质上是一种小型的数据文件，通常由服务器生成并发送给客户端（通常是浏览器），然后客户端将这个数据文件保存在本地，并在每次请求同一服务器时将其发送回去。通过这种方式，服务器可以识别出是同一位用户在访问网站，从而实现了一些高级的功能，比如记录用户的登录状态、购物车信息等。 #### 三、Cookie的工作原理 1. **添加Cookie**：在创建Cookie时，可以通过`document.cookie`属性来设置。需要注意的是，默认情况下，Cookie是临时的，也就是所谓的“会话Cookie”，它会在浏览器关闭时自动清除。为了使Cookie具有持久性，我们需要为Cookie设置一个过期时间。例如： ```javascript var set_time = new Date(); set_time.setDate(set_time.getDate() + 7); // 设置过期时间为7天后 document.cookie = 'username=' + encodeURIComponent('joe你好') + '; expires=' + set_time.toUTCString(); ``` 这里使用了`encodeURIComponent`函数来对包含中文和其他特殊字符的数据进行编码，避免在存储过程中出现乱码问题。 2. **获取Cookie**：所有Cookie都是以分号和空格分隔的形式存储在一起的。当我们调用`document.cookie`时，返回的是一个字符串，该字符串包含了当前域名下所有的Cookie。因此，如果想要获取特定名称的Cookie值，就需要对这个字符串进行解析。一种常用的方法是： ```javascript function getCookie(key) { var arr1 = document.cookie.split(';'); // 将整个Cookie字符串按分号分割成数组 for (var i = 0; i < arr1.length; i++) { var arr2 = arr1[i].trim().split('='); // 对数组中的每一个元素进行处理，去除空白字符，然后按等号分割 if (arr2[0] === key) { // 找到匹配的键名 return decodeURIComponent(arr2[1]); // 返回解码后的值 } } return null; // 如果没有找到匹配的键，则返回null } ``` 3. **删除Cookie**：实际上，删除Cookie并不是真的从客户端删除数据，而是将Cookie的过期时间设置为过去的时间，这样Cookie就会立即失效并被清除。 ```javascript function removeCookie(key) { document.cookie = key + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } ``` #### 四、Cookie的限制虽然Cookie提供了方便的数据持久化功能，但它也有一些限制： - **容量限制**：每个域名下的Cookie数量和每个Cookie的大小都有上限。大多数现代浏览器支持每个域名最多存储20个Cookie，每个Cookie的大小限制在4KB左右。 - **安全性**：由于Cookie存储在客户端，因此容易受到诸如脚本注入攻击等安全威胁。 - **跨域问题**：不同域名之间的Cookie是相互隔离的，这意味着在一个网站上设置的Cookie无法被另一个域名读取。 #### 五、实际应用场景假设我们有一个简单的登录页面，用户登录后希望记住用户名，以便下次访问时自动填充。我们可以使用下面的代码来实现： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Login Example</title> </head> <body> <input type="text" id="username" placeholder="请输入用户名"> <input type="button" value="登录" id="login"> <input type="button" value="删除" id="del"> <script> window.onload = function() { var login = document.getElementById("login"); var del = document.getElementById("del"); var oUsername = document.getElementById("username"); // 获取已存储的用户名 if (getCookie('username')) { oUsername.value = getCookie('username'); } // 登录按钮点击事件 login.onclick = function() { alert('登录成功'); setCookie('username', oUsername.value, 5); }; // 删除按钮点击事件 del.onclick = function() { removeCookie('username'); oUsername.value = ''; }; }; // 设置Cookie function setCookie(key, value, t) { var clearDate = new Date(); clearDate.setDate(clearDate.getDate() + t); document.cookie = key + '=' + encodeURIComponent(value) + '; expires=' + clearDate.toUTCString(); } // 获取Cookie function getCookie(key) { var arr1 = document.cookie.split(';'); for (var i = 0; i < arr1.length; i++) { var arr2 = arr1[i].trim().split('='); if (arr2[0] === key) { return decodeURIComponent(arr2[1]); } } return null; } // 删除Cookie function removeCookie(key) { document.cookie = key + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } </script> </body> </html> ``` 这段代码实现了登录功能，并且在用户成功登录后将用户名存储为Cookie。同时，还提供了一个删除按钮，用于清除已经存储的用户名。 #### 六、结论 `Cookie`是一种简单但非常有用的机制，可以帮助开发者实现许多Web应用中的基本功能。然而，由于其存在一定的限制和潜在的安全风险，开发者在使用时需要谨慎考虑。通过了解`Cookie`的工作原理和使用方法，我们可以更好地利用这项技术来提升用户体验和应用程序的功能性。

资源推荐

资源评论