前端常用缓存方法


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

2.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()    //清除所有数据

3.sessionStorage

sessionStorage是一种会话级别的本地存储,一旦关闭浏览器他就会消失,以下是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的数据

补充1.Session

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

补充2.Cookie和Session简单对比

Cookie和Session 的区别:

1)cookie数据存放在客户的浏览器上,session数据放在服务器上。

2)cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。

3)session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用cookie。

4)单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
5)所以建议:
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留,可以放在cookie中

补充3.sessionStorage和localStorage的区别

sessionStorage和localStorage有什么区别呢?sessionStorage是一种会话级别的本地存储,一旦关闭浏览器他就会消失,而前者是很“持久”的,即使你关闭一万次浏览器也没事,所以差距还是很大的
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户关闭浏览器窗口后,数据立马会被删除。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。第二天、第二周或下一年之后,数据依然可用。

注:文章借鉴

说说几种常用的前端缓存


文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
 上一篇
React.Fragment语法的使用 React.Fragment语法的使用
React.Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。
2021-02-25
下一篇 
json.stringify()的妙用,json.stringify()与json.parse()的区别 json.stringify()的妙用,json.stringify()与json.parse()的区别
今天学习了了来一下JSON.stringify(),发现JSON.stringify()使用场景真的挺多,我现在将学习经验分享大家。
2021-02-24
  目录