javascript
2019-03-05
2019-03-05
一、localStorage和sessionStorage
- 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
优势:
- 1、localStorage拓展了cookie的4K限制
- 2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
局限:
- 1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
- 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型
- 3、localStorage在浏览器的隐私模式下面是不可读取的
- 4、localStorage不能被爬虫抓取到
- 5、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡,目前可以忽略。
localStorage和sessionStorage的区别
- localStorage是永久的储存在浏览器里,只要你不手动清除它就会一直存在
- sessionStorage是暂时储存,只要把浏览器关闭就会自动清除,注意,是关闭所有同种浏览器才能清除
- localStorage和sessionStorage的用法一致。
localStorage的使用
- 浏览器支持情况:
判断浏览器是否支持:
1
2
3
4
5
6
7if(window.localStorage){
console.log('浏览器支持localstroage')
}
else{
alert('你的浏览器不支持localstroage!')
// IE低版本不支持用UserData(不说明)
}1、设置
window.localStorage.setItem('key', 'value');
// 键、值 值可以是一个变量2、获取
window.localStorage.getItem('key');
3、清除
localStorage.removeItem('key');
//清除一条window.localStorage.clear();
//清除全部
提示:
- webStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的webStorage
- webStorage常用来储存一些数据,如登录信息
- webStorage转换成为字符串形式,一般我们会将可以使用JSON.stringify()这个方法将JSON存入localStorage中,读取时就是JSON字符串
1
2
3
4
5
6
7
8
9
10
11
12
13var data={
name:'小明',
sex:'男',
hobby:'编程'
};
var info=JSON.stringify(data)
if(window.localStorage){
window.localStorage.setItem('info',info)
console.log(window.localStorage.getItem('info'))
}
else{
alert('你的浏览器不支持localstroage!')
}
二、cookie
- 注意:javascript在chrome浏览器中不支持本地调试cookie,用firefox亲测可以,如果一定要在chrome中调试,要将代码放到服务器才可以调试。
创建
document.cookie="username=张三";
- 可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
document.cookie="username=李四; expires=Thu, 18 Dec 2043 12:00:00 GMT";
// 可以用Date()函数来设置,详细看后面- 可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
document.cookie="username=王五; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
读取
var c= document.cookie;
// 读取该网站的全部cookie,如:cookie1=value; cookie2=value……- 返回指定的cookie看后面的示例
修改
- 修改cookie类似于创建cookie,旧的cookie被新的覆盖
document.cookie="username=张三";
删除
- 只需要设置 expires 参数为以前的时间即可
document.cookie = "username=张三; expires=Thu, 01 Jan 1970 00:00:00 GMT";
示例:
设置cookie
1
2
3
4
5
6
7
8function setCookie(key,value,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = key + "=" + value + "; " + expires;
}
setCookie('username','张三',1) //exdays为0或负数时删除该cookie获取cookie
1
2
3
4
5
6
7
8
9
10
11function getCookie(cname){
var name = cname + "=";
var arr = document.cookie.split(';');
for(var i=0; i<arr.length; i++) {
var c = arr[i].trim();
if (c.indexOf(name)==0) {
return c.substring(name.length,c.length); // 返回用户指定的cookie
}
}
return "";
}检测cookie
1
2
3
4
5
6
7
8
9
10
11
12function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,7);
}
}
}
注意事项
- 1、Chrome中过期时间可能会出错,因为它用的是格林尼治时间,北京时间会多出8小时;
- 2、服务器的时间和时区设置会影响cookie;
- 3、每条cookie只有4k大小,储存有限但是几乎都是敏感的信息,如账号密码;
- 4、当cookie过多超过浏览器预定的数目后,有的浏览器会智能清除一些cookie。