有关前端存储方式的总结

亲爱的小伙伴，关于前端存储，你所了解到的知识点有多少呢？下边我就来分享一下自己对前端存储的理解和学习经验吧，希望能够对当前的你有所帮助哟！

总的来说，前端存储方式就包括了cookie和webStorage，webStorage又分为了sessionStorage（会话存储）和localStorage(本地存储)。

下边主要以javascript对前端存储相关操作进行演示。

1.cookie

特点：1.cookie由服务器端产生，存储在客户端中。2.cookie在同一服务器/作用域下共享，在不同服务器/作用域下是不共享的。3。cookie的数据最大传输值为4kb

相关操作：

        1.引入js-cookie库

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>

        2.设置cookie：

Cookies.set(key,value,{expires:有效时长})
//例如：
Cookies.set('name','zhangsan',{exprires:7})//这里，cookie的有效时长为7天

        3.获取cookie

Cookies.get(key)
//例如：
Cookies.get('name')

        4.移除cookie

Cookies.remove(key)
//例如：
Cookies.remove('name')

2.sessionStorage 会话存储

特点 ：1.针对选项卡，选项卡关闭或浏览器关闭，会话失效，数据消失。2.数据传输可以达到5MB

相关操作：

        1.设置会话存储

sessionStorage.setItem(key,value)
//例如：
sessionStorage.setItem('status','正常')

        2.获取会话存储

sessionStorage(key)
//例如：
sessionStorage('status')

        3.移除一条会话存储

sessionStorage.removeItem(key)
//例如：
sessionStorage.removeItem('status')

         4.清空所有会话存储

sessionStorage.clear()

3.localStorage 本地存储

特点：1.数据存储在本地磁盘中，即使关闭选项或浏览器，数据依旧存在。2.数据传输可以达到5MB

相关操作：

        1.设置本地存储

localStorage.setItem(key,value)
//例如
localStorage.setItem('gender','male')

        2.获取本地存储

localStorage.getItem(key)
//例如：
localStorage.getItem('gender')

        3.移除一条本地存储

localStorage.removeItem(key)
//例如：
localStorage.removeItem('gender')

        4.清空所有本地存储

localStorage.clear()