Web前端数据存储—cookie机制(设置,获取,删除cookie)

    今天看到cookie机制就来记录一下,我们前端一般存储cookie都是在登录的时候进行的,两种,选一个就行(其实都一样,只不过一个明细化了)。

    我们先了解一下

    cookie:

    HTTPCookie,通常叫做cookie,是用于客户端存储会话信息的。

    例如平常我们使用的浏览器保存某个网页的登陆用户名,是浏览器提供的一种机制,交由javascript处理cookie,即BOM的document.cookie属性;

    Cookie在性质上是绑定在特定的域名下,当设定一个cookie后,再给创建它的域名发送请求时,都会包含这个cookie。

    这个限制确保cookie只能让批准的接受者访问,而无法被其它域访问。

    每个域的cookie总数是有限的,不过浏览器之间各有不同。

    火狐限制50个,

    IE7和之后的版本都是50个,

    safari和chrome对于每个域的cookie数量限制没有硬性规定。

    一、Cookie的构成:

    名称:cookie的名称,不区分大小写;

    值:存储在cookie中的字符串,必须被URL编码;

    域:cookie对于哪个域是有效的,如果没有明确确定,那么这个域会被认作来自设置cookie的那个域。

    路径:指定域中的那个路径应该向服务器发送cookie;

    例如:设置http://www.wrox.com/books才能访问,

    那么即使同一域名下的http://www.wrox.com的页面就不会发送cookie信息,即使请求都是来自同一域名下的。

    删除时间:用于删除cookie的准确时间,这个值是个GMT格式的日期(Wdy,DD-Mon-YYYY HH:MM:SS GMT)

    安全标志:指定后,cookie只有在使用SSL连接的时候菜发送到服务器。例如只能用https而不能用http发送。

    二、javascript处理cookie

    Cookie格式:

    Document.cookie = name = value;

    expires = expiration_time;

    path = domain_path;

    domain = domain_name; 只有名字和值键值对是必须的

    例如:把 name = sss, 时间1天,域名为www.baidu.com,

    路径为www.baidu.com/books;

    Document.cookie = " name = sss ";

    expires = (Date.getDate()+1243600*1000).toGMTString();

    domain = www.baidu.com;

    path = “www.baidu.com/books”;

    这样的读写很不直观,一般会写些函数来简化cookie的功能;基本的三种操作:设置,读取,删除。

    第一种

    第二种

    项目中登录时进行cookie 值 存 取。以element ui框架为例

    //样式就自己写吧