浏览器的储存方式总结---cookie、web Storage

最新推荐文章于 2024-09-12 17:17:05 发布

Darlingmi

最新推荐文章于 2024-09-12 17:17:05 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/darlingmi/article/details/123131646

版权

本文探讨了浏览器中的数据存储需求，重点讲解了Cookie的构成、使用方法及其缺点，并介绍了Web Storage，包括sessionStorage和LocalStorage的特性和应用场景。通过理解这两种存储方式，可以更有效地管理客户端数据，减少不必要的服务器通信。

摘要由CSDN通过智能技术生成

文章目录

为什么要进行数据存储
Cookie
web存储机制
- 什么是Web存储
- - sessionStorge
  - LocalStorage

为什么要进行数据存储

随着Web应用程序的出现，产生了对于能够直接在客户端上存储用户信息能力的要求，我们知道当我们访问某个页面的时候，很多东西都需要从服务器端进行加载，如果这个时候能将一些东西存储在客户端的话，是不是就可以直接拿来用啦，方便快捷，又可以节省了很多不必要的请求，为什么不用呢？

Cookie

说到cookie，cookie存储是属于文档对象模型。cookie有两个主要功能：第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态；而第二个功能也就是我们现在经常使用cookie在客户端存储数据。

Cookie的构成

名称：唯一的、确定的cookie的名称
值：存储在cookie中的字符串值，该值必须被URL编码
域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
路径：对于指定域中的路径，应该向服务器发送cookie
失效时间：表示cookie何时应该被删除的时间戳
安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器

如何使用cookie存储数据

有两种方式可以生成cookie，一种是服务器发送http响应时指定Set-Cookie进行指定；另一种我们可以使用js生成cookie。
示例：

var  CookieNow={
   
 get: function(name) {
    
            var cookieName = encodeURIComponent(name) + "=",cookieStart = document.cookie.indexOf(cookieName),cookieValue = null; 
              if(cookieStart > -1) {
   
                  var cookieEnd = document.cookie.