客户端缓存

客户端储存

目录

• cookie
• cookie的限制
• cookie的构成
• cookie的使用

cookie的限制

• 一个浏览器最多300个cookie
• 每个cookie不超过4096字节
• 每个域不超过20个cookie
• 每个域不超过81920字节 注意：每个域下设置cookie个数都是不太相同的，根据服务器不同限制也不太一样 比如ie，Edg每个域不超过50个cookie；Firefox每个域不超过150个cookie；Chrome就没有这个限制

cookie的构成

• http中set-Cookie字段
• 名称（name）:name
• 值（vaule）:value
• 域（domain):domain=.wrox.com;意思再www.wrox.com 下所以子域下都可以访问
• 路径（path）：path=/;
• 过期时间：（expires):expires=Mon,22-Jan-07:10 GMT;
• 安全标准（secure):secure意思这个只能在这个cookie在ssl连接下才会发送（发送的是名/值）

cookie的使用

1.js中的cookie

/* CookieUtil这个类是用javascipt来读写cookie的 */
class CookieUtil{
    static get(name){
        let cookieName=`${encodeURIComponent(name)}=`,
        cookieStart=document.cookie.indexOf(cookieName),
        cookieValue=null;
        if(cookieStart>-1){
            let cookieEnd=document.cookie.indexOf(";",cookieStart);
            if(cookieEnd==-1){
                cookieEnd=document.cookie.length;
            }
            cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
        }
        return cookieValue;
    }
    static set(name,value,expires,path,domain,secure){
        let cookieText=`${encodeURIComponent(name)}=${encodeURIComponent(value)}`
        if(expires instanceof Date){
            cookieText+=`;expires=${expires.toGMTString()}`;
        }
        if(path){
            cookieText+=`;path=${path}`;

        }
        if(domain){
            cookieText+=`;domain=${domain}`;
        }

        if(secure){
            cookieText+=";secure";
        }
        document.cookie=cookieText;
    }
     static unset(name,path,domain,secure){
         CookieUtil.set(name,"",new Date(0),path,domain,secure);
     }
};

/* 设置cookie */
CookieUtil.set("name","ncc")
/* 读取cookie */
CookieUtil.get("name");

/* 删除cookie */
CookieUtil.unset("name")
/* 设置有路径，过期时间和域的cookie */
CookieUtil.set("name","ncc","/books/projs/","www.wrox.com",new Date("January 1,2010"));
/* 删除刚设置的cookie */
CookieUtil.unset("name","ncc","/books/projs/","www.wrox.com");

2.nodejs中的cookie

/* nodejs 使用cookie */

var express = require('express')
var cookieParser = require('cookie-parser')
var app = new express()
app.use(cookieParser());
 
app.get('/',function(req,res){
    console.log(req.cookies);
    res.send('你好nodejs')
})
 
app.get('/news',function(req,res){
    console.log(req.cookies);
    res.send('你好nodejs news')
})
 
app.get('/set',function(req,res){
    /*
    *   参数1：名字
    *   参数2：cookie的值
    *   参数3：cookie的配置信息
    * */
    //设置cookie由服务器端来完成，设置之后保存在浏览器本地
    // 客户端浏览器发送请求的时候把存储在浏览器本地的cookie也一并发送过去
 
 
    /*
    *   在localhost:3000下设置的cookie，默认在localhost:3000下的
    *   所有路由可以访问到
    * */
    res.cookie('username','cookie的值',{maxAge:600000})
 
    /*
    *   设置cookie path，只在设置cookie时所在的域名的path指定的路由下可以访问
    * */
    res.cookie('userinfo','cookie111',{maxAge:60000,path:'/news',httpOnly:true})
 
    /*
    *   aaa.com
    *   news.aaa.com
    *   www.aaa.com
    *   domain:'aaa.com'  多个二级域名共享cookie
    * */
    res.cookie('user','cookie的值111',{maxAge:600000,domain:'.aaa.com'});
 
    /*
    *   使用sign对cookie进行加密
    *   1、参数表示加密的随机字符串
    *   app.use(cookieParser('sign');
    *   2、设置
    *   res.cookie('userinfo','cookie222_info',{maxAge:50000,signed:true})
    *   3、使用 获取
    *   req.signedCookies
    * */
 
 
 
    res.send('设置cookie成功')
})
 
app.listen(3000,'localhost')
 

web storage storage类型 storage类型是用于保持名/值对的；storage的实例增加了以下方法： 1，clear()：删除所以值 2，getItem(name)得到name值 3，key(index):获得给定数值位置的名称 4,removeItem(name):删除给定name的名值对 5，setItem(name,value); 这些方法直接或者间接通过storage对象调用 sessionStorag对象是storage对象的实例 sessionStorage对象 sessionStorage对象只存储会话数据，意味着当浏览器关闭数据就会消失

//使用方法储存数据
sessionStorage.setItem("name","luca")
// 使用属性储存数据
sessionStorage.book="luca"
//使用方法取得数据
let name=sessionStorage.getItem("name");
//使用delete删除值
delete sessionStorage.name
//使用方法删除值
sessionStorage.removeItem("name");

localStorage对象 浏览器持久储存数据

//使用方法储存数据
localStorage.setItem("name","luca")
// 使用属性储存数据
localStorage.book="luca"
//使用方法取得数据
let name=localStorage.getItem("name");
//使用delete删除值
delete localStorage.name
//使用方法删除值
localStorage.removeItem("name");