总结一下常用的前端缓存

前端缓存,是浏览器为了提升网站的加载性能,缩短用户等待时间而采取的措施,浏览器总是想尽量少地向服务器发送请求,能够从自己保存的副本中得到的,就不去麻烦服务器了,毕竟自己动手丰衣足食嘛,所以更准确的叫法应该为浏览器缓存,下文中如果出现缓存等字眼,指的就是前端缓存或浏览器缓存。

1.Cookie

cookie是比较老的前端缓存技术了,它的特点是想要使用它前端必须要有服务(静态网页是不行的),而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢?因为只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送,而且由于浏览器的跨域限制,客户端和服务端必须要保证同源的原则,由于cookie是存放在前端的,所以安全问题一直是个大问题,因此一般重要的信息不建议放在cookie中存放。

2.Session

对于服务端的程序眼来说session大家肯定很熟悉了,session是一种服务端的机制,也就是能把信息存放在服务端,所以安全可以保障,它的原理是通过session id来识别客户端,这个session id是存放在cookie中的(当然session id让用户看见没无妨),服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了,一个是把数据存在客户端;一个存在服务端,从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。

3.localStorage

它的特点就是“持久”,一旦通过保存,不通过手动清除的话,就会一直保存在前端,它的保存格式是键值对的方式也就是“key-value”的方式保存的,它的存储空间大小限制在500万字符左右,一下是它的一些使用方法:

localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
localStorage.getItem(key) 获取键值key对应的值
localStorage.key 获取键值key对应的值
localStorage.setItem(key, value) 添加数据,键值为key,值为value
localStorage.removeItem(key) 移除键值为key的数据
localStorage.clear() 清除所有数据

4.sessionStorage

这个和localStorage有什么区别呢?sessionStorage是一种会话级别的本地存储,一旦关闭浏览器他就会消失,而前者是很“持久”的,即使你关闭一万次浏览器也没事,所以差距还是很大的。后两者是H5才有的特性,因为现在都是前后端分离的开发模式,前端工程师都很青睐这两种前端缓存方式,以下是sessionStorage的记本用法:

sessionStorage.length 获得storage中的个数
sessionStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage.getItem(key) 获取键值key对应的值
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value) 添加数据,键值为key,值为value
sessionStorage.removeItem(key) 移除键值为key的数据
sessionStorage.clear() 清除所有数据

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » 总结一下常用的前端缓存

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注