本地存储的数据会在浏览器关闭后保留,而会话存储的数据会在页面会话结束时消失。
一 什么是本地存储(LocalStorage)
本地存储(LocalStorage)是浏览器提供的一种机制,允许Web应用程序在用户的浏览器中存储数据。这些数据以键值对(key-value pairs)的形式存储,并且可以在浏览器会话之间保持持久性。本地存储是基于域名的,这意味着数据将与特定域名相关联。
本地存储的特点 :
持久性: 存储在LocalStorage中的数据在浏览器关闭后仍然保留,直到被明确删除。
容量限制: 浏览器为每个域名提供了一定的LocalStorage存储容量,通常为5-10MB。超出容量限制时,需要谨慎管理存储数据。
同源策略: 受同源策略的限制,LocalStorage只能访问与当前页面相同协议、域名和端口的数据。这意味着不同子域名之间的LocalStorage数据是隔离的。
只能存储字符串: LocalStorage只能存储字符串类型的数据。如果要存储其他数据类型(如对象...),需要进行序列化和反序列化。
二,使用本地存储
1.存储数据:
使用localStorage.setItem(key, value)
方法来存储数据,其中key
是您要存储的数据的键,value
是对应的值。
注意:LocalStorage只能存储字符串类型的值,如果要存储对象或数组,需要先将其序列化为字符串。
2.检索数据
使用localStorage.getItem(key)
方法来检索存储在LocalStorage中的数据。如果之前存储的是对象或数组,需要使用JSON.parse()
来解析数据。
3.更新数据
要更新LocalStorage中的数据,首先检索数据,然后对其进行修改,最后使用localStorage.setItem()
重新存储。
4.删除数据
使用localStorage.removeItem(key)
方法来删除LocalStorage中的特定数据。
5.清空本地存储
使用localStorage.clear()
方法来清空整个LocalStorage,删除所有存储的数据。
三,会话存储获取数组
localStorage有个限制,会将数组转为字符串
JSON.stringify:将数组设置为本地存储中的值。
JSON.parse:从本地存储中获取数组。
会话存储
只需要把localStorage改成sessionStorage
本地存储和会话存储的区别
关闭浏览器再打开,就会发现会话存储空间的数据已经消失了,但是本地存储空间的数据还是存在的。
扩展
localStorage也可以手动设置失效时间,大概思路是存储的值加一个时间戳,下次取值时验证时间戳,localStorage只能存储字符,存入时将对象转为json字符串,读取时也要解析.
总结
相同点:都保存在浏览器端,可以下图位置查看储存的信息
不同点:
①传递方式不同
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
②数据大小不同
cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。