作用：Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
- 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie的使用规范：
1.使用javascript创建cookie
JavaScript可以使用document。Cookie属性来创建、取读、及删除cookie。
JavaScript中创建cookie如下所示：
Document.cookie=”username=John Doe”;
还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
属性：title ：用于鼠标悬浮的提示信息。
案例：
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>.
输入用户名点击确定，再次访问网页是网页会显示你的用户名。例如：QQ
Coolie
属性：
value //键值对，如test=hello
expires //绝对过期时间,如new Date()，所以浏览器都支持
domain //限定域名,如www.abc.com
path //限定路径，如/index
max-age //相对失效时间，单位为秒；取代expires，冲突则以max-age为准（IE不支持）
secure //协议，不需要指定，当HTTPS通信时自动打开
HttpOnly//仅用于服务器发送，JS无法读取
cookie小饼干，保存在客户端的一个小的文档。每次通信的时候传递给服务器端。服务器端根据进行一系列操作，比如判断用户是否登录状态。
Cookie一般是服务器要求客服端记录的一部分数据。类似于名牌、门禁卡。Cookie是有过期时间的，过期之后自动删除，依赖于本地机器删除一个文件。
Cookie只能在本域名之间的不同页面进行数据交互，不能在不同的域名进行交互。
Cookie的数据是在每一次进行数据交互的时候（或者数据请求的时候）自动携带自动传输。
1、Cookie的局限性
- 每一次请求都会自动带上cookie的所有数据，会影响网站的性能。
- Cookie保存的数据不能太大，一般限制在4k。
- cookie在本地的操作非常不方便（特别是js）。
2、js操作cookie
document.Cookie
cookie的值是一个字符串，不管有多少个cookie，都保存在一个字符串里面的，每一个值之间使用分号隔开，每一个值都是键值对的形式存在的。格式如下：
key1=value;key2=value2;keyn=valuen;
js并没有提供我们cookie的直接方法，增删改查；
1）增
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
2）删
function deleteCookie(c_name){
var exdate = new Date();
exdate.setDate(exdate.getDate()-1);
document.cookie=c_name+ "=1;expires="+exdate.toGMTString();
}
3）改：Cookie自身的机制会自动识别设置的key是否具有，如果有那么就自动修改，如果没有那么就新增。
setCookie（）
4）查
function getCookie(c_name)
{
//检测是否具有cookie
if (document.cookie.length>0)
{
//查询是否存在这样的一个cookie
c_start=document.cookie.indexOf(c_name + "=")
//是否具有这个cookie
if (c_start!=-1)
{
//不是第一个cookie
if(c_start!=0){
var s = document.cookie.charAt(c_start-1);
// 是不是完全匹配键名
while(s!=' '){
c_start = document.cookie.indexOf(c_name+"=",c_start+c_name.length);
if(c_start==-1){
//没找到结束
return '';
}
s = document.cookie.charAt(c_start-1);
}
}
//获取出值的第一个位置
c_start=c_start + c_name.length+1;
//获取结束位置
c_end=document.cookie.indexOf(";",c_start)
//处理最后一个cookie的结束位置
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
3、使用字符串切割法切割cookie。
function getCookie(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if(arr[0]==name)return arr[1];
}
return "";
}
4、使用面向对象的方式操作cookie。
(function () {
function Cookie() {
}
/**
* 获取指定的cookie
* @param key
* @returns {undefined}
*/
Cookie.prototype.get = function (key) {
this.clear();
var cookie = document.cookie;
var cookies = cookie.split(';');
var value = undefined;
cookies.forEach(function (c, index) {
var tmp = c.split('=');
if (tmp[0] && tmp[0].trim() === key) {
if (tmp.length <= 1) {
return null;
}
value = tmp[1];
}
})
return value;
}
/**
* 设置cookie
* @param key
* @param value
* @param exdays
*/
Cookie.prototype.set = function (key, value, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = 'expires=' + d.toUTCString();
document.cookie = key + '=' + value + '; ' + expires;
}
/**
* 清除cookie
* @param key
*/
Cookie.prototype.clear = function (key) {
/**
* 清除指定的cookie
*/
if (key)
this.set(key, '', -1);
else {
/**
* 清除所有cookie
*/
var keys = this.keys();
var _this = this;
keys.forEach(function (item, index) {
_this.set(item, '', -1);
})
}
}
/**
* 获取所有cookie名
* @returns {Array}
*/
Cookie.prototype.keys = function () {
var cookie = document.cookie;
var cookies = cookie.split(';');
var keys = [];
cookies.forEach(function (c, index) {
var tmp = c.split('=');
keys[index] = tmp[0].trim();
})
return keys;
}
/**
* 挂载Cookie
* @type {Cookie}
*/
window.Cookie = Cookie;
})(window);
5、找开源(js-cookie)
1)创建
创建简单的cookie
Cookies.set('name', 'value');
创建有效期为7天的cookie
Cookies.set('name', 'value', { expires: 7 });
为当前页创建有效期7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' });
2)取值
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
获取所有cookie
Cookies.get(); // => { name: 'value' }
3)删除值
Cookies.remove('name');
如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', { path: '' }); // 删除成功
//注意，删除不存在的cookie不会报错也不会有返回
session：保存在服务器端的小文件。依赖于cookie的，cookie里面会保存一个sessinID的值
web存储
1.localStorage
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。没有数据量大小的限制。
但是这个机制是在前端不会主动传输的，所以他更多的是前端程序员的一种存储机制。不需要每一次传输的数据保存在local。需要每次传输的还是要保存在cookie。
实用。有时需要有时不需要的数据，需要的时候从local取出来放入cookie。用过之后删除。
1)检测浏览器是否支持文本存储
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码..... } else { // 抱歉! 不支持 web 存储。
}
2)操作手段
保存数据：
localStorage.setItem(key,value);
读取数据：
localStorage.getItem(key);
删除单个数据：
localStorage.removeItem(key);
删除所有数据：
localStorage.clear();
得到某个索引的key：
localStorage.key(index);
2.SessionStorage
SessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除但是在本网站的不同页面之间是存在的。
1)操作
增，改：
sessionStorage.[name] = value;
删：
delete sesionStorage.[name];
查：
sessionStorage.[name];
3.Web SQL数据库
是集成在浏览器上的一个小型数据库。兼容不是很高。操作和普通的关系型数据库完全不一样，执行的也是标准的SQL语句。具有数据库数据表数据行这些概念。
离线缓存
缓存，用户可在应用离线时使用它们。
速度，已缓存资源加载更快。
减少服务器负载，浏览器将只从服务器下载更新过或更改过的资源。
缓存文件的格式：
CACHE MANIFEST
1.css
2.js
3.png
NETWORK:
1.php
2.jsp
FALLBACK:
/html/ error.html
网友评论