美高梅电子游戏 ,前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同;总结一下基本的用法。

互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器。这样用户登录、购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳入W3C规范 RFC6265中。

一、cookie

区别

  • cookie在浏览器请求中每次都会附加请求头中发送给服务器。大小不能超过4k

  • localStorage保存数据会一直保存没有过期时间,不会随浏览器发送给服务器。大小5M或更大

  • sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大

定义:

cookie

浏览器在本地按照一定规则存储一些文本字符串,每当浏览器像服务器发送请求时带这些字符串。服务器根据字符串判定浏览器的状态比如:登录、订单、皮肤。服务器就可以根据不同的cookie识别出不同的用户信息。浏览器和服务器cookie交互图如下。

存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽;

cookie如何产生

1、在浏览器访问服务器时由服务器返回一个Set-Cookie响应头,当浏览器解析这个响应头时设置cookie
美高梅电子游戏 1

2、通过浏览器js脚本设置 document.cookie = 'name=monsterooo';

可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间。

浏览器访问服务器携带cookie过程

美高梅电子游戏 2

注意点:

js设置cookie详解

服务器设置cookie这里不过多介绍了同客户端js设置类似,重点来看一下js如何设置cookie和一些细节。

在js中设置cookie完整格式是:document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"

  • key=value
    key设置的是cookie的键,value设置的是cookie的值。示例如下:
    document.cookie = "name=monsterooo";
    美高梅电子游戏 3

  • expires
    设置cookie的生存时间,默认为当然浏览器会话(Session)。当设置一个时间时,每次访问浏览器会用当前时间和cookie的expries做比对,如果过期cookie则会被删除。设置格式为GMT时间格式。示例如下:

        var t = new Date( +(new Date()) + 1000 * 120 );
        document.cookie = `name=monsterooo;expires=${t.toGMTString()};`;
    

    美高梅电子游戏 4

  • domain
    在浏览器读取cookie的时候只有当cookie的domain和浏览器当然的域名匹配才能读取到。默认情况下cookie的domain和当然访问一样。但是很多网址不止有一个域名比如:a.example.com和b.example.com如果他们想要共享cookie那么cookie的domain需要设置为domain=.example.com,path路径需要设置为path=/。这样之后两个域名都能同时访问到cookie了。

    var t = new Date( +(new Date()) + 1000 * 120 );
    document.cookie = `name=monsterooo;expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`;
    
  • path
    path路径和domain功能类似,只是path的范围更小。path控制cookie在当前域名的路径,只有路径相匹配cookie才能被读取到。在www.example.com/order/index.html中cookie设置如下
    document.cookie = `order=10; expires=${t.toGMTString()}; path=/order`;,那么只有在/order路径下的页面cookie中才会带有order值。

cookie的访问需要服务器环境,直接在本地文件访问无效;

localStorage和sessionStorage

localStorage和sessionStorage都继承于Storage,提供了统一的api来访问和设置数据。api列表为:

  • clear 清空存储中的所有本地存储数据
  • getItem 接受一个参数key,获取对应key的本地存储
  • key 接受一个整数索引,返回对应本地存储中索引的键
  • removeItem 接受一个参数key,删除对应本地存储的key
  • setItem 接受两个参数,key和value,如果不存在则添加,存在则更新。

localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();
// 对象访问方式同样有效
localStorage.order = 'b110';
localStorage.order; // b110

cookie的访问和设置需要导入jquery.cookie.js文件;

扩展

Cookie的一个极端使用例子是僵尸Cookie(或称之为“删不掉的Cookie”),这类Cookie较难以删除,甚至删除之后会自动重建。它们一般是使使用Web
storage
API、Flash本地共享对象或者其他技术手段来达到目的的。相关内容可以看:

Evercookie by Samy Kamkar

浏览器对每一个访问的地址下可添加的cookie是有限制的;同时每个浏览器可添加的cookie个数也存在限制。

参考连接

  • Cookies

  • Storage

  • RFC6265介绍

作用:

储存用户的痕迹信息,如用户名,ID号,密码等,是服务器脚本发送给浏览器的加密数据,便于下次访问时用户可以直接登录等;

68399皇家赌场 ,运用代码

//访问cookie,mycolor代表键
var $cook = $.cookie("mycolor");
//设置cookie
$.cookie("mycolor", "red"});
$.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效时间和访问路径
//删除cookie,传递null值
$.cookie("mycolor", null});

说明:

‘mycolor’参数相当于cookie存储数据的键,即数据的名字,通过名字访问;

cookie的设置有三个参数,第一为设置数据的键,第二个为设置数据的值,expires表示有效时间,单位为天,path为访问路径,”/”表示当前文件路径,在网站中表示根目录。

注意:如果不设置路径,默认情况下只有设置cookie的网页才可以访问此cookie;如果想网站的网页可以共享cookie,将路径设为根目录。

注意:cookie就相当于一个能存储数据的微型本地数据库,”mycolor”相当于每条数据的key。

二、localStorage

定义:一个本地的小型数据文件

存储在本地,容量为5M或者更大,不会在请求时候携带传递;

数据在所有同源窗口中共享,一直有效,除非人为删除,可作为长期数据。

注意点:

localStorage数据不需要依赖服务器环境访问,可以直接在本地文件访问;

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章