专栏首页Html5知典Cookie——客户端存储

Cookie——客户端存储

概述

cookie API 是通过document.cookie属性来实现的。cookie是存储在访问者的计算机中的变量,与页面相关联。

cookie包含在HTTP协议中,服务器端程序可以为页面创建或更新cookie值,通过HTTP请求回送给客户端,浏览器则会将cookie值自动保存起来, 再次请求该页面时,浏览器会自动把与该页面相关联的所有cookie值放到HTTP请求中一起发送给服务器。

因为cookie能被自动处理这个特点,服务器端WEB应用程序的Session ID通常就是放在cookie里进行保存的。

  • 格式 每个cookie的格式:<cookie名>=<值>;名称和值都必须是合法的标志符。
  • 大小限制 cookie是有大小限制的,每个cookie所存放的数据不可超过4kb,如果cookie字符串的长度超过了4kb,则该属性将返回空字符串。
  • 有效期限 cookie是存在有效期的。在一般情况下,一个cookie的生命周期就是在浏览器关闭的时候结束。如果希望cookie能在浏览器关掉之后还能够使用,就必须要为该cookie设置有效期。
  • 域和路径 cookie存在域和路径的概念。域就是domain的概念,因此不同的域之间不能互相访问cookie。路径就是path的概念,一个网页所创建的cookie只能被与这个网页在同一目录或子目录下的所有网页访问。

代码示例

简单的存取操作

document.cookie = 'username=Hudao';

以上代码中的'username'表示cookie名称,'Hudao'表示表示这个名称对应的值。假设cookie名称并不存在,那么就是创建一个新的cookie;若存在,则修改这个cookie名称对应的值。如果要多次创建cookie,重复此方法即可。

设置有效期

在默认情况下,cookie会在浏览器关闭的时候消除,但可通过expires来设置cookie的有效期。语法如下:

document.cookie = "name=Hudao;expires=date";

上面的代码中的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:

var _date = new Date(); 
_date.setDate(_date.getDate()+30);
_date.toGMTString();

上面的代码可解释为:

  • 通过new生成一个Date的实例,得到当前的时间。
  • getDate()方法得到当前本地月份中的某一天,接着加上30就是此cookie可在本地保存30天。
  • 通过setDate()方法来设置时间;
  • 用toGMTString()方法把Date对象转换为字符串,并返回结果

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa),作者:hudao

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS——用户界面

    用户界面(User Interface)属性是一些与用户界面特性相关的CSS属性。

    Html5知典
  • <img>标签

    <img> 标签向网页中嵌入一幅图像。<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 元素创建的是被引用图像的占位空间。

    Html5知典
  • <dt>

    <dt> 标签定义了定义列表中的项目(即术语部分)。<dt>与<dl>、<dd>配合使用。

    Html5知典
  • 关于客户端存储的前端面试题总结

    用户1687375
  • 实用主义:前端cookie介绍及操作封装

    MrTreasure
  • Fortify Audit Workbench Cookie Security: Cookie not Sent Over SSL

    现今的 Web 浏览器支持每个 cookie 的 secure 标记。 如果设置了该标记,那么浏览器只会通过 HTTPS 发送 cookie。 通过未加密的通道...

    用户1637609
  • 登录之记住用户与自动登录

           如题,大家在使用各种网站时,为了更好的用户体验,网站往往会提供这两种功能之一,以便下次登录方便。 ? ?        今天要讲述的是用java操...

    高爽
  • Python的Cookie详解

    CookieJar——>派生——>FileCookieJar——>派生——>MozillaCookieJar和LwpCookieJar

    py3study
  • JQuery之cookie增删改查操作

    在Java Web开发中cookie一般有两种新建方法,一种是在Java中创建维护,另一种是在前端中创建和维护。 二者之间最大的区别就是:Java中的cooki...

    林老师带你学编程
  • 14.Django基础之jQuery操作cookie

      定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;

    changxin7

扫码关注云+社区

领取腾讯云代金券