一、什么是本地存储
1.将部分存储到客户端(浏览中)
2.作用:数据存储在本地避免重复调用服务器资源。
离线依旧可以访问
避免在请求服务器时空白状态
二、本地存储的分类
web SQL,indexedDB
LocalStorage,Session
Cookies->最早出现的本地存储
Application cache
三、Cookies
1.是以文件的信息保存在浏览器中的一段文本信息。
2.cookies是浏览器提供的功能,向服务器与js开放,所以服务器及客户端都可以保存cookies
3.js存储cookies:cookies是document下面的一个属性
document.cookie='名=值';//写入的值必须是以名值对的形式存在的。
4.存储cookie时常用属性:expires:过期时间,日期格式(new Date())
max-age:保存时间,就是保存cookie多少秒;默认为-1,表示关闭失效。
ps:当存储时,如果不指定expires或max-age,那么cookie即关闭浏览器失效
domainn,path:限定访问区域
读取cookie:document.cookie=>读取数据在一个字符串,需要切割字符串
销毁cookie:将max-age设置为0或expires设置为过期时间 ;
4.注意:1)cookies必须运行在服务器环境中
2)cookie默认不能跨域
3)只能保存4kb的内容,ie6限定只能存20个cookie
4)以明文的形式传输和保存的,极容易被盗用,安全性不够高(自己加密)
5)兼容性好,所有的浏览器都支持。
6)自动加载到request header中,如果过大会,请求时间会很长
四、LocalStorage和SessionStorage
1.可以理解为一个容量更大的cookie,是H5里新加的功能
2.分类:LocalStorage和SessionStorage,基本没区别,唯一的区别在于localstoorage是永久存储在本地,但是sessionstoryage关闭浏览器就丢失。
浏览器的支持情况:IE8+,Firefox3.0+,chrome4.0+,opera10.5+,safari4.0+,ios2.0+,android2.0+
存储:window下的属性
window.localStorage.a='b';//a=b
localStorage['color']='red';/color=red/
localStorage.setItem('m','n');//m=n
获取: console.log(getItem('m'));
console.log(localStorage.a);
console.log(localStorage['color']);
销毁:localStorage.removeItem('名')
locaStorage.clear();
3.注意:
1)可以存储5M的内容,部分浏览器是可以自定义存储大小容易出现兼容的问题。
2)IE和火狐必须运行在服务环境。
应用场景:
1)记住用户信息。
2)购物车
3)记录用户足迹