数据存储的两种方式:cookie和webStorage存储
一、sessionstorage(会话存储)
1、添加数据:SessionStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
2、获取数据:SessionStorage.getItem('key');
该方法接受一个键名作为参数,返回键名对应的值。如果获取不到对应的值,则返回的值为null
3、删除数据:SessionStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
4、删除全部数据:SessionStorage.clear()
该方法会清空存储中的所有数据。
二、localStorage(本地存储)
1、添加数据:localStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
2、获取数据:localStorage.getItem('key');
该方法接受一个键名作为参数,返回键名对应的值。如果获取不到对应的值,则返回的值为null
3、删除数据:localStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
4、删除全部数据:localStorage.clear()
该方法会清空存储中的所有数据
三、cookie
【cookie在浏览器和服务器间来回传递】
【还有路径(path)的概念,可以限制cookie只属于某个路径下sessionStorage和 localStorage不会自动把数据发送给服务器,仅在本地保存】
当一个用户通过 HTTP 协议访问一个服务器的时候,这个服务器会将一些 Key/Value 键值对返回给客户端浏览器,并给这些数据加上一些限制条件
在条件符合时这个用户下次访问这个服务器的时候,数据又被完整地带回给服务器。
四、webStorage和cookie的区别
sessionStorage | localStorage | cookie | |
存储大小限制 | 5M | 5M | 4K |
时效性 | 仅在当前浏览器窗口关闭之前有效 | 始终有效,本地存储,用作持久数据 | 只在设置的过期时间之前有效 |
作用域 | 不在不同的浏览器窗口共享,即使是同一页面 | 在所有同源窗口中共享 | 在所有的同源窗口中共享 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本