cookie最大存储量_Cookie与本地储存

1.cookie

是由W3C组织提出，最早由Netscape社区发展的一种机制。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

简单说cookie会话跟踪技术

在一次会话从开始到结束的整个过程中,全程跟踪记录客户端的状态,例如是否登录,购物车信息, 是否已经下载,是否已经点赞,视频播放进度等

1. cookie的作用与特性

cookie是存储在浏览器中的缓存信息

1.1 作用:

1. 登录记录

2. 多个页面的数据传递

3. 保存用户信息

1.2 完整的格式

name=value;[expires=date];[path=path]

1.3 特点:

1. 存值不大(最大可以存4kb)

2. 每个域名下最多存储50条数据(不同浏览器会有不同)

3. 可以自己设置过期时间

4. 具有不可跨域性

1.4 中文的编码

中文与英文字符不同，中文属于Unicode字符，在内存中占4个字符，而英文属于ASCII字符，内存中只占2个字节。Cookie中使用Unicode字符时需要对Unicode字符进行编码，否则会乱码。

所以cookie直接存中文可能会出现乱码

encodeURIComponent  将中文编译成对应的字符

decodeURIComponent 将对应的字符转为中文

2. 设置cookie

我们可以先检查缓存cookie

console.log(document.cookie)

设置cookie

document.cookie = 'name=wuwei'

默认cookie的结束时间是关闭浏览器的时候

3.. 设置过期时间

设置cookie的过期时间使用expires

var date = new Date(new Date().getTime() + 1*60*1000) ;document.cookie = 'name=wuwei;expires =' + date.toGMTString();console.log(document.cookie)

设置的过期时间不能小于当前时间  否则cookie会理解被清除

var date = new Date(new Date().getTime() -1) ;document.cookie = 'name=wuwei;expires =' + date.toGMTString();console.log(document.cookie)

4. 设置多个cookie

var date = new Date(new Date().getTime() + 30 * 60 * 1000);document.cookie = 'name=wuwei;expires =' + date.toGMTString();document.cookie = 'pwd=w123456;expires =' + date.toGMTString();console.log(document.cookie)

5. 封装设置cookie

5.1 设置cookie

// 封装的设置一个cookie的函数function setCookie(data){    var date = new Date(new Date().getTime() + data.time * 60* 1000).toGMTString();    document.cookie = data.name +'='+ data.value+';expires='+date}setCookie({    name:'zhangsan',    value:18,    time:5})function setCookie(name,value,{expires, path, domain, secure}){    var cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value)        if(expires){        cookieStr += ';expries=' + afterOfDate(expires)    }        if(path){        cookieStr += ";path=" + path    }        if(domain){        cookieStr += ";path=" + domain    }        if(secure){        cookieStr += ";secure"    }        document.cookie = cookieStr}function afterOfDate(n){    var d = new Date()    var day = d.getDate();    d.setDate(n + day)    return d}

5.2 封装获取getCookie

function getCookie(name){    var cookieStr = decodeURIComponent(document.cookie)    var start = cookieStr.indexOf(name + '=')        if(start == -1){        return null    }else{        // 查询结束的位置        var end = cookieStr.indexOf(";", start)        if(end == -1){            end = cookieStr.length        }                var str = cookieStr.substring(start,end)        return str.split("=")[1]    }}

5.3 封装删除cookie

清除cookie

思路就是将cookie时间设置为已经过期的时间浏览器会自动清楚过期的cookie

function removeCookie(name){    document.cookie = encodeURIComponet(name) + "=;expires=" + new Date(0)}

6. 封装设置多个cookie

function setCookie(data){    data.forEach((item,index)=>{        var date = new Date(new Date().getTime() + item.time * 60* 1000).toGMTString();        document.cookie = item.name +'='+ item.value+';expires='+date    })}setCookie([    {        name:'zhangsan',        value:18,        time:5    },{        name:'lisi',        value:30,        time:10    },{        name:'wangwu',        value:41,        time:10    }])

7. 设置所有cookie常用的属性

属性	描述
name	该Cookie的名称。Cookie一旦创建，名称便不可更改
value	该Cookie的值。如果值为Unicode字符，需要为字符编码。
expires	设置cookie的过期时间使用expires(确定的时间)
maxAge	max-age用秒来设置cookie的生存期(5*24*60*60)
path	该Cookie的使用路径
domain	可以访问该Cookie的域名。(localhost)
secure	该Cookie是否仅被使用安全协议传输。安全协议。默认为false如果不设置字段  cookie 可以通过http,https 协议加载设置如果设置这个字段, 那么只能通过https协议才能设置成
HTTP-Only	HTTP-Only 背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie属性访问

二.本地存储

本地存储是HTML5中新增的特性,用来解决cookie存储空间不足的问题

1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。

背熟这句口诀：“两个接口，四个函数”。

2、口诀：

(1)两个接口：分别是sessonStorage和localStorage

(2)四个函数：分别是setItem、getItem、removeItem和clear

1. Storage

1.1 sessionStorage

session临时回话，从页面打开到页面关闭的时间段 窗口的临时存储，页面关闭，本地存储消失

临时存储就是存储一下,其他页面并不会共享

1.2 localStorage

域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

永久存储(可以手动删除数据)

多个页面可以共享

2. Storage的特点

1. 永久存储

2. 存储量限制 ( 5M ) 客户端微型数据库

3. 客户端完成，不会请求服务器处理

4. sessionStorage数据是不共享、 localStorage共享

5. 浏览器不统一,并且在IE8以下不兼容

6. 储存的值限定是字符串类型,需要我们通过JSON 对象去转换

7. 存储内容多的话会消化内容空间,会导致变卡

3. Storage API

3.1 setItem(键名，键值):

设置数据，(key,value)类型，类型都是字符串 可以用获取属性的形式操作

在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。

例如:

 localStorage.setItem("name", "wuwei");

3.2  getItem():

读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：

获取数据，通过key来获取到相应的value

var data = localStorage.getItem("name");

3.3 removeItem():

移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。

删除数据，通过key来删除相应的value

 localStorage.removeItem("name");  

3.4 clear():

移除本地存储所有数据。删除全部存储的值

localStorage.clear();  

1.4 示例:

<button id="addData">添加数据button><button id="getData">获取数据button><button id="removeData">删除数据button><input type="text" id="txt"><script>    addData.onclick = function () {        sessionStorage.setItem('name', txt.value);    }    getData.onclick = function () {        alert(sessionStorage.getItem('name'))    }    removeData.onclick = function () {        sessionStorage.removeItem('name')    }script>

临时存储,只要页面不关闭,无论怎么刷新,数据都不会删除

3.5 存储事件:(了解就OK)

当数据有修改或删除的情况下，就会触发storage事件 在对数据进行改变的窗口对象上是不会触发的

1. Key : 修改或删除的key值，如果调用clear(),key为null

2. newValue  :  新设置的值，如果调用removeStorage(),key为null

3. oldValue :  调用改变前的value值

4. storageArea : 当前的storage对象

5. url :  触发该脚本变化的文档的url 注：session同窗口才可以,例子：iframe操作

window.addEventListener('storage',function(ev){    console.log(ev.key);    console.log(ev.newValue  );    console.log(ev.oldValue );    console.log(ev.storageArea );    console.log(ev.url);})

3.6 兼容问题

那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。