掌握这三种浏览器存储技术,提升Web开发效率!

职场   2024-12-18 13:00   北京  

  • localStorage

  • sessionStorage

就是浏览器给我们提供的可以让我们在浏览器上保存一些数据常用的本地存储

 localStorage


特点

  • 长期存储,除非手动删除否则会一直保存在浏览器中,清除缓存或者卸载浏览器也就没有了

  • 可以跨页面通讯, 也就是说在一个页面写下在另一个页面可以读取


保存
语法: window.localStorage.setItem(名字,值)
注意: 只能保存字符串类型的数据,其它数据类型不能被保存


获取
语法: window.localStorage.getItem(名字)
注意: 保存的是字符串类型,取出来的也是字符串类型
返回值: 

如果localStorage 中有这条数据 拿到的就是这个条数据的值

如果localStorage 中没有这条数据 拿到的就是 null


删除
语法: 

window.localStorage.removeItem(名字)作用: 就是删除localStorage中该条数据


 sessionStorage


特点:

  • 会话存储,就是浏览器关闭就没有了

  • 可以跨页面通讯(有要求)
    要求:必须是本页面跳转才可以


保存
语法: window.sessionStorage.setItem(名字,值)
注意: 只能保存字符串类型的数据,其它数据类型不能被保存


获取
语法: window.sessionStorage.getItem(名字)
注意: 保存的是字符串类型,取出来的也是字符串类型
返回值:
如果 sessionStorage 中有该条数据 获取到的就是该条数据的值
如果 sessionStorage 中没有该条数据 拿到的就 null


删除语法: window.sessionStorage.removeItem(名字)作用: 就是删除 sessionStorage 中的这条数据


 浏览器本地存储 - cookie


特点:
1. 只能存储字符串, 有固定的格式
key=value; key2=value2; key3=value3
2. cookie 存储大小有限制
4KB 左右
3. 存储的时效性
默认是会话级别时效, 可以手动设置过期时间
4. 操作必须依赖服务器
本地打开的页面是不能操作 cookie,也就是存存不上 , 读读不出来,要求页面必须在服务器打开
5. 跟随前后端请求自动携带
只要 cookie 空间中有内容的时候,会在该页面和后端交互的过程中自动携带
6. 前后端操作
前端可以使用 JS 来操作,任何一个后端语言都可以操作
7. 存储依赖域名
哪一个域名存储, 哪一个域名使用,不能跨域名通讯


 cookie的操作


设置一条 cookie语法: document.cookie = 'key=value'

获取 cookie

语法: document.cookie

返回值: 完整的 cookie 字符串


推荐一个受到超多好评的终生学习小程序「千锋学习站」

全网超火的课程资源:涵盖18个IT行业热门课程,3000G精品授课视频,从入门到精通,理论+实战,小白适用!
全网超牛的公开课:定期邀请一线大厂大佬来直播间宣讲,全程干货,福利满满,从基础理论到实战案例,分享实战IT技能,拒绝纸上谈兵!
全网超全的题库资源:1800个知识点练习,10万道面试真题,沉浸式刷题练习,帮助各位同学夯实基础,提升技术水平,为升职加薪保驾护航!
— 不负每份期待,继续与你共同成长—
点击下方小卡片,开始学习吧
👇👇👇

End -

想要获得技能提升和职业发展
点击即可学习免费好课哦!
 
 
免费好课推荐:
 Linux云计算 | Java开发 | 鸿蒙 | Python数据分析 | 物联网 | 网络安全 | 游戏原画 | 软件测试 | Unity游戏 | PMP项目管理 | HTML5大前端 | 全媒体运营 | UI/UE设计 | 影视剪辑 | C++ | 大数据 | 计算机二级


大前端私房菜
每天推出前端开发技巧、工具资源、项目实战等主题内容。在这里,你可以找到前端性能优化的私房秘籍,JavaScript 个性化框架的私房推荐,也有过时技术的私房警示。期待在公众号与更多小伙伴相遇!我们一起进步,共同成长
 最新文章