目录
1.cookie
是由W3C组织提出,最早由Netscape社区发展的一种机制。由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。
简单说cookie会话跟踪技术
在一次会话从开始到结束的整个过程中,全程跟踪记录客户端的状态,例如是否登录,购物车信息, 是否已经下载,是否已经点赞,视频播放进度等.
1 cookie的作用与特性
cookie是存储在浏览器中的缓存信息.
1.1 作用
- 登录记录
- 多个页面的数据传递
- 保存用户信息
1.2 完整的格式
name=value;[expires=date];[path=path]
1.3 特点
- 存值不会很大(每次最多存4kb)
- 每个域名下最多存50条信息(不同的浏览器会稍有不同)
- 具有不可跨域性
- 可以自己设置过期时间
1.4 中文的编码
中文与英文字符不同,中文属于Unicode字符,在内存中占4个字符,而英文属于ASCII字符,内存中只占2个字节。Cookie中使用Unicode字符时需要对Unicode字符进行编码,否则会乱码。
所以cookie直接存中文可能会出现乱码.
encodeURIComponent 将中文编译成对应的字符
decodeURIComponent 将对应的字符转为中文
2.设置cookie
设置cookie
document.cookie = 'name=hello'
默认的设置cookie的设置过期时间是浏览器关闭的时候.
3.设置cookie时间
设置cookie的过期时间使用expires .
let date = new Date().getTime();
let outTimer = date + 24 * 60 * 60 * 1000 //设置cookie一天以后过期
let outDate = new Date(outTimer);
document.cookie = "name = hello;expires=" + outDate;
console.log(document.cookie);
在浏览器中打开开发者工具,在application下就可看到我们设置的cookie的过期时间.
因为我们设置的是cookie会在一天之后过期,所以在Expires中看到过期时间是2020-3-30 13:56:59...
注:在设置过期时间时不能小于当前时间,如果小于,则cookie会被自动清除.
let date = new Date(0);
console.log(date);
document.cookie = "name = hello;expires=" + date;
console.log(document.cookie)
可以很清楚的看到第二个打印的内容为空.
4.设置多个cookie
let date = new Date().getTime();
let outTimer = date + 24*60*60*1000; //设置cookie一天以后过期
let outDate = new Date(outTimer);
document.cookie = "name = hello ; expires = " + outDate;
document.cookie = 'password = 123456 ; expries = ' + outDate;
console.log(document.cookie);
打印出两条cookie信息.
5.设置所有cookie的常用属性
属性 | 描述 |
Name | 设置cookie的名称,该名称一旦确定便再不能更改 |
Value | 该Cookie的值。如果值为Unicode字符,需要为字符编码。 |
Domain | 可以访问该cookie的yuming(localhost) |
Path | 当前cookie的使用路径 |
Expires | 设置cookie的过期时间 |
Max-Age | 以秒为单位设置cookie的生存期 |
HttpOnly | 告诉浏览器该cookie不能通过javaScript的document.cookie属性来访问 |
Secure | 该Cookie是否仅被使用安全协议传输。 安全协议。默认为false 如果不设置字段 cookie 可以通过http,https 协议加载设置 如果设置这个字段, 那么只能通过https协议才能设置 |
2.本地存储
本地存储是HTML5中新增的特性,用来解决cookie存储空间不足的问题
1、概述:
对于Web Storage来说,实际上是Cookies存储的进化版。
背熟这句口诀:“两个接口,四个函数”。
2、两个接口四个函数:
(1)两个接口:分别是sessonStorage和localStorage
(2)四个函数:分别是setItem、getItem、removeItem和clear
1.Storage
1.1 Session Storage
session临时回话,从页面打开到页面关闭的时间段 ,窗口的临时存储,页面关闭,本地存储消失
临时存储就是存储一下,其他页面并不会共享
1.2 Local Storage
域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。
永久存储(可以手动删除数据)
多个页面可以共享
2.storage的特点
-
永久存储
-
存储量限制 ( 5M ) 客户端微型数据库
-
客户端完成,不会请求服务器处理
-
SessionStorage数据是不共享、 LocalStorage共享
-
浏览器不统一,并且在IE8以下不兼容
-
储存的值限定是字符串类型,需要我们通过JSON 对象去转换
-
存储内容多的话会消化内容空间,会导致变卡
3. storage的API
3.1 setItem(键名,键值)
设置数据(key,value)类型,类型都是字符串 可以用获取属性的形式操作.
在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。
如
localStorage.setItem("name", "hello");
3.2 getItem():
读取已存储在本地的数据,通过键名作为参数读取出对应键名的数据。如:获取数据,通过key来获取到相应的value.
如:
localStorage.setItem("name", "hello");
let c = localStorage.getItem("name");
console.log(c)
打印的结果为name的value值:hello
3.3 removeItem():
移除已存储在本地的数据,通过键名作为参数删除对应键名的数据。
删除数据,通过key来删除相应的value
localStorage.removeItem("name");
3.4 clear():
移除本地存储所有数据。删除全部存储的值.
localStorage.clear();
4.案例
<body>
<button id="addData">添加数据</button>
<button id="getData">获取数据</button>
<button id="removeData">删除数据</button>
<button id="clearData">清空数据</button>
<input type="text" id="txt">
<script>
let addBtn = document.querySelector("#addData");
let getBtn = document.querySelector("#getData");
let reBtn = document.querySelector("#removeData");
let clearBtn = document.querySelector("#clearData");
let txt = document.querySelector("#txt");
let arr = ['1','2','3'];
let num = 0;
//可根据需求切换Session Storage和local Storage
addBtn.onclick = function () {
let value = txt.value.trim();
if(value) {
sessionStorage.setItem(arr[num], txt.value);
}
num++;
if(num > arr.length - 1) {
num = 0;
}
}
//获取name名为1的数据
getBtn.onclick = function() {
window.alert(sessionStorage.getItem('1'))
}
//删除name名为2的数据
reBtn.onclick = function () {
sessionStorage.removeItem('2')
}
clearBtn.onclick = function() {
sessionStorage.clear();
}
</script>
</body>
在这个案例中可以测试Session Storage和Local Storage中方法的具体效果,
Session Storage不可以多个页面共享,在当前窗口已经添加了数据,然后在一个新窗口中打开时我们手动添加的数据就已经看不见了.
Local Storage可以在多个页面共享,在当前窗口已经添加了数据,然后在一个新窗口中打开时我们手动添加的数据就依旧存在.