资讯专栏INFORMATION COLUMN

客户端存储——Cookie

BothEyes1993 / 1817人阅读

摘要:如包含这个域名下面的所有子域,例子中是对应的子域路径指定域名中特定的路径才能访问失效时间指定停止向服务器发送的时间,如果没有设置或者设置的是以前的时间,浏览器就在结束会话的时候删除掉所有的值安全标志只有使用协议才可以发送原生实现的增删改查

Cookie

性质

响应时:服务器会设置set-Cookie字段返回给客户端

请求时:浏览器会将值保存在请求域名对应的cookie当中进行发送

限制

域名设置一个cookie以后,每次向这个域名发送请求时都会包含这个cookie

在同一域名下,本地存储的cookie数量是有限的

构成
举例:Set-Cookie:name=value;expires=Mon,22-Jan-07 07:10:24 GMT;domain=.baidu.com; path=/; secure

名称(name):用来表示一个唯一确定的Cookie,进行url编码

值(value):存储在Cookie中的字符串值,进行url编码
ps:url编码有三种方法

(1)escape/uescape:进行unicode字符编码与解码
(2)encodeURI/decodeURI:对特殊字符不进行编码
(3)encodeURIComponent/decodeURIComponent:对特殊字符也会进行编码

域(domain):表示哪个域名设置的Cookie,所有向这个域名发送的请求都会包含这个Cookie,可以是一个域名也可以是一个子域。如:baidu.com(包含这个域名下面的所有子域:www.baidu.com、im.baidu.com),例子中是对应的子域

路径(path):指定域名中特定的路径才能访问cookie

失效时间(expires):指定停止向服务器发送cookie的时间,如果没有设置或者设置的是以前的时间,浏览器就在结束会话的时候删除掉所有的cookie值

安全标志(secure):只有使用https协议才可以发送cookie

原生实现cookie的增删改查

const CookieUtil = {
      get:function(name){
        const cookie = document.cookie;

        const cookieName = encodeURIComponent(name) + "=";
        const cookieStart = cookie.indexOf(cookieName);
        let cookieValue = null;

        if(start > -1){
            let cookieEnd = cookie.indexOf(";", cookieStart);

            if(cookieEnd === -1){
                  cookieEnd = cookie.length;
            }

            cookieValue = cookie.substring(cookieStart+cookieName.length, cookieEnd);
        }

        return cookieValue;
      },
      
      set:function(name, value, expires, domain, path, secure){
         let cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

         if(expires){
            cookieText += "; expires=" + expires.toUTCString();
         }

         if(domain){
            cookieText += "; domian=" + domain;   
         }

         if(path){
            cookieText += "; path=" + path;
         }

         if(secure){
             cookieText += "; secure";  
         }

         document.cookie = cookieText;
         console.log(document.cookie);
      },
      
      delete:function(name, domian, path, secure){
        this.set(name, "", new Date(0), domian, path, secure);
      }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93078.html

相关文章

  • cookie与session详解

    摘要:所谓的无连接就是服务器收到了客户端的请求之后,响应完成并收到客户端的应答之后,即断开连接。从而节省传输时间。协议对事务的处理没有记忆能力。这种方式某种方面上讲解放了服务器,但是却不利于客户端与服务器的连接。 session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我...

    SwordFly 评论0 收藏0
  • 深入了解浏览器存储--从cookie到WebStorage、IndexedDB

    摘要:优异的性能表现,有一部分原因要归功于浏览器存储技术的提升。是服务端生成,客户端进行维护和存储。当超过时,它将面临被裁切的命运。此外很多浏览器对一个站点的个数也是有限制的。存入读取数据保存的数据,以键值对的形式存在。 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑WebApp——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功...

    XGBCCC 评论0 收藏0
  • JavaWEB开发10——Cookie&Session

    摘要:会话技术是帮助服务器记住客户端状态区分客户端会话技术从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,成为一次会话。会话技术就是记录这次会话中客户端的状态与数据的。 一、会话技术简介1.存储客户端的状态由一个问题引出今天的内容,例如网站的购物系统,用户将购买的商品信息存储到哪 里?因为Http协议是无状态的,也就是说每个客户访问服务器端资源时,服务器并 不知道该客户...

    Yujiaao 评论0 收藏0
  • 常用的本地存储——cookie

    摘要:下面来看看常用的本地存储。缺点不支持,低版本不支持,并且不支持查询语言,简称为,是在浏览器中保存结构化数据的一种数据库。它类似数据库的结构化数据存储机制,代替了废弃已久的,它能够在客户端存储大量的结构化数据,并且使用索引高效检索的。 一、引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那就不得不谈谈本地存储了。本地存储的好处显而易见,一是避免取回数据前...

    leo108 评论0 收藏0
  • 很全很全的前端本地存储讲解

    摘要:正文开始三种本地存储方式前言网络早期最大的问题之一是如何管理状态。这个特点很重要,因为这关系到什么样的数据适合存储在中。特点生命周期持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 最近一直在搞基础的东西,弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的……)链接地址:Front-End-Basics 此篇文章的地址:三种本地存储方式 ...

    Cciradih 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<