-
cookie的概念
cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件,它可以包含相关用户的信息。无论何时用户链接到服务器,Web站点都可以访问Cookie信息。比如:自动登录、记住用户名,记住一些和用户相关的信息等 -
cookie的特点
-禁用cookie后,无法正常注册登陆;
-cookie是与浏览器相关的,不同浏览器之间所保存的cookie也是不能互相访问的;
-cookie可以被删除。因为每个cookie都是硬盘上的一个文件;
-cookie安全性不够高-xss攻击 -
cookie的使用
-cookie的添加-
键值对,自定义键名,值一定是字符串
存储数组和对象:
带有过期时间的cookie:
-cookie的获取-
如果cookie不存在,输出undefined;
封装cookie,实现传入key,输出value ,已存入:me=张三; age=100; sex=男, 每一项继续进行转数组name=张三,age=100,sex=男
第一次 newarr = [name,张三]
第二次 newarr = [age,100]
第三次 newarr = [sex,男]
let newarr = arr[i].split(’=’);
newarr[0]
传入的值和数组的第一项(key)进行比较,满足条件输出newarr[1]的value。
cookie封装:
let cookie = {
set: function(name, value, days) {
let d = new Date();
d.setDate(d.getDate() + days)
document.cookie = `${name}=${encodeURIComponent(value)};expires=${d};path=/`;
},
get: function(name) {
var arr = document.cookie.split('; ');
var newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr[i] = arr[i].split('=');
}
for (let value of newarr) {
if (name == value[0]) {
console.log(decodeURIComponent(value[1]));
}
}
},
unset: function(name) {
this.set(name, '', -1)
}
}
cookie.set('姓名', '张三',10);
cookie.set('xingbie', 'xhahahha', 10);
cookie.get('姓名');//'张三'
-
cookie,locastorage,sessionstorage区别
locastorage,sessionstorage html5新增的;
localStorage拓展了cookie的4K限制,永久存储,除非手动删除;
cookie可以自由设定过期时间;
cookie需要服务器。-localstorage的特点-
1、localStorage拓展了cookie的4K限制,永久存储,除非手动删除。
2、localStorage会将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,但只有在高版本的浏览器中才支持的。
3、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
5、不同的浏览器本地存储不能相互进行访问。
6、sessionstorage会话结束就消失。
**localStorage存储:**
//点操作符存储
window.localStorage.name = 'zhangsan';
//中括号方式存储[]
window.localStorage['age'] = 100;
//利用内置的方法存储
window.localStorage.setItem('sex', '男');
存储对象
let obj = {
a: 1,
b: 2,
c: 3
}
localStorage.setItem('objdata', JSON.stringify(obj));
**localStorage获取**
console.log(localStorage.name);
console.log(localStorage['age']);
console.log(localStorage.getItem('objdata'));
console.log(JSON.parse(localStorage.getItem('objdata')));//eval()
**localStorage删除**
localStorage.removeItem('name');
localStorage.clear();//删除所有
**sessionStorage:会话结束**//sessionStorage属于当会话结束的时候,存储的值会被清空
sessionStorage.setItem('a', 10000);