cookie存储
基本介绍:
-
web存储相关的技术：cookie | sessionStorage | localStorage |应用缓存
-
cookie是一种会话跟踪技术，用于在进行网页访问的时候，存储页面中的某些数据信息。
cookie的使用注意点:- 使用cookie来进行数据存储的大小有限制，4KB;
- 每个网页中存储cookie的个数（最多50）和每个网站中存储cookie的个数都有限制（200）;
- 各个不同的浏览器对cookie的数量也不相同.
IE6.0：每个域为20个，大小为4095个字节;
IE7.0/8.0：每个域为50个 ，大小为4095个字节;
Opera：每个域为30个 ，4096个字节;
FF：每个域为50个 ，大小为4097个字节;
Safari：没有个数限制，大小为4097个字节;
Chrome：每个域为53个，大小为4097个字节;
总结：在进行页面cookie操作的时候，应该尽量保证cookie个数小于20个，总大小 小于4KB-
cookie数据的过期时间
- 默认情况下，cookie存储的内容是一次性的，它的有效期间是当前会话（需要把整个浏览器都关闭会话就结束）
- 设置过期时间：通过expires=time;的格式来进行指定, 设置了之后只要没有超过过期时间，那么数据将一直都在
-
cookie是不可以跨浏览器的(在IE中保存的cookie, 不可以在火狐中使用)
-
cookie是不可以跨域的(跨域名)
示例：127.0.0.1/code/test.html 和127.0.0.1/code/test1.html可以访问
网络请求的常见路径：
http://www.baidu.com:80/资源
协议://域名.后缀:端口号/资源
不能跨域的含义：就是只有 （协议+域名+后缀+端口）号都相同才能相互访问
http://www.baidu.com:80/a.html
http://www.baidu.com:80/b.html 能http://www.baidu.com:81/a.html http://www.baidu.com:80/b.html 不能（端口号不相同） http://mp3.baidu.com:80/a.html http://map.baidu.com:80/b.html 不能（二级域名不相同） https://www.baidu.com:80/a.html http://www.baidu.com:80/b.html 不能（协议不相同） http://www.bdu.com:80/a.html http://www.dbu.com:80/b.html 不能（以及域名不相同）
cookie的设置和使用
- 设置方法：
设置cookie数据：document.cookie = "name=zhangsan";
设置cookie数据和过期的时间：document.cookie = "name=zhangsan; expires="+date+";";
过期7天的设置：var date = new Date(); // date.setDate(date.getDate() + 7); - 使用注意：
在设置cookie的时候，一次只能设置一个数据（一个键值对），不能进行批量设置
错误的演示：window.cookie = "name=zhangsan&age=18";
示例代码
//设置三个cookie的值，默认的过期时间是seesion（会话内）
document.cookie = "name=wendingding";
document.cookie = "age=18";
document.cookie = "des=12345";
//设置cookie的值，并指定过期的时间
var date = new Date();
date.setDate(date.getDate() + 3); //3天的过期时间
//注意：在设置过期时间的时候，中间使用；分隔开发
document.cookie = "color=red;expires="+date;
//删除cookie
//删除cookie的原理：只要过期时间超过了当前的时间, 数据就会被删除
date.setDate(date.getDate() + -1);
document.cookie = "age=18; expires="+date+";";
cookie相关方法的封装
- 读取某个cookie的值（需要做切割处理）
document.cookie = "name=zhangsan";
document.cookie = "age=18";
console.log(document.cookie);
//01 获取某个key对应的cookie值
function getCookie(key) {
//01 先对获取的字符串进行切割，获取得到数组
var arrM = document.cookie.split(";");
console.log(arrM);
//02 遍历数组
for (var i = 0,len = arrM.length;i<len;i++)
{
//03 对数组中取出来的每个元素再进行切割
var arrT = arrM[i].split("=");
var res = arrT[0].replace(" ","");
if(res == key)
{
return arrT[1];
}
}
}
console.log(getCookie("age"));
- 添加cookie数据（需要判断是否要设置过期时间）
//添加单个cookie的值
function addCookie(key,value,date) {
//01 判断是否需要设置过期时间
if (arguments.length == 2)
{
document.cookie = key + "=" + value;
}else if (arguments.length == 3)
{
//02 设置过期时间
var dateM = new Date();
dateM.setDate(dateM.getDate() + date);
var res = key + "=" + value +";" + "expires="+dateM;
document.cookie = res;
}
}
addCookie("haha","wuwuwuw",2);
- 删除cookie数据（利用过期时间和添加cookie的方法实现）
//删除cookie数据：原理（当前的时间超过了cookie的过期时间那么该数据就会被删除）
function removeCookie(key){
//重新设置某个cookie的过期时间
addCookie(key,"",-1);
}
removeCookie("haha");
使用cookie存储技术来记住页码
使用cookie技术来处理微博项目说明
- 之前的微博项目中还存在一些问题，如果当前的页面是第二页，那么此时刷新页面会自动跳转到默认显示的第一页
- 要求在进行刷新的时候，显示的还是当前页的数据
具体实现思路：在代码中获取当前的pageNumber,那么当页面加载完成之后就调用方法传递pageNumber作为参数刷新指定页的数据
具体实现：
1. 在点击页码的时候拿到当前的页码，通过page.text()
2. 在切换页码选中状态之后，添加代码：addCookie("pageNumber",$(this).text());
3. 在按钮点击之前（页面加载完成之后）获取页码，var pageNumber = getCookie("pageNumber") || 1;
4. 在获取默认显示微博列表数据的位置，把获取第一页的数据修改成获取第pageNumber页的数据
5. 处理默认选中的页码：oPage.child
sessionStorage存储
简单说明
1. 在存储用户数据的时候，因为cookie可以存储的数据比较小才4KB左右，所以也可以考虑使用sessionStorage来存储,大小限制为2M左右
2. 该技术和localStorage是h5推出的，因此在使用的时候，需要考虑到兼容性的问题
3. 相关资料：http://www.w3school.com.cn/html5/html_5_webstorage.asp
4. 简单介绍和使用：
001 sessionStorage：会话存储技术（session-会话）
002 该技术和cookie一样，一样浏览器退出了，那么保存的数据就会
003 演示sessionStorage技术的相关操作
添加|获取|更新|删除|清空
示例代码
<input type="text">
<button class="btn1">添加</button>
<button class="btn2">获取</button>
<button class="btn3">更新</button>
<button class="btn4">删除</button>
<button class="btn5">清空</button>
<script>
window.sessionStorage.setItem("age","18");
window.sessionStorage.setItem("color","red");
window.sessionStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//添加操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//获取操作
console.log(window.sessionStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//删除操作
window.sessionStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.sessionStorage.clear();
};
</script>
localStorage存储
简单说明
1. 简单对比：保存在本地 + 没有时间限制
2. 大小比较：4K - 5M - 20M
3. 使用方式和sessionStorage相同
示例代码
<input type="text">
<button class="btn1">添加</button>
<button class="btn2">获取</button>
<button class="btn3">更新</button>
<button class="btn4">删除</button>
<button class="btn5">清空</button>
<script>
window.localStorage.setItem("age","18");
window.localStorage.setItem("color","red");
window.localStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//添加操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//获取操作
console.log(window.localStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//删除操作
window.localStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.localStorage.clear();
};
</script>
网友评论