本地存储

Posted 2020-09-14

一、什么是本地存储
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）记录用户足迹