前端培训-中级阶段(22)- localStorage / sessionStorage 本地存储(2019-10-24期)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

Storage


Storage 提供了访问特定域名下的会话级别或永久级别的存储功能,例如,可以添加、修改或删除存储的数据项。


键值对是以字符串的形式存储。且是同步的方式存储,所以长字符串频繁读取会造成卡顿。


Storage 属性


  1. Storage.length 返回一个整数,表示存储的数量项个数。


Storage 方法


  1. Storage.key(idx) 通过 idx 返回对应数据项的键。顺序规则不是增加顺序。


  1. Storage.getItem(key) 通过 键 返回对应数据项的 值。也可以通过localStorage[key]或者localStorage.key来获取值。


  1. Storage.setItem(key, value) 通过 键 设置对应数据项的 值。也可以通过 = 号赋值。


bVbzh1X.webp.jpg


  1. Storage.removeItem(key) 通过 键 移除对应数据项。


  1. Storage.clear() 清空存储中所有内容


localStorage


永久级别的本地存储。


Window.localStorage,各个窗口都可以共享使用,如果其他窗口修改之后,会触发 storage 通知事件。


sessionStorage


会话级别的本地存储。


Window.sessionStorage,在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持。新窗口或者新页面不会共享。


注意事项


  1. 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。


  1. localStorage 有可能会在空间不足被清理、或者用户主动清理。


  1. 因为是同步操作,所以会有卡顿问题。


localForage


localForage 是一个 JavaScript 库,通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。


它能存储多种类型的数据,而不仅仅是字符串。


localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

目录
打赏
0
0
0
0
2
分享
相关文章
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
182 0
前后分离项目 —— 前端实现本地存储(数据可供其他页面使用)
前后分离项目 —— 前端实现本地存储(数据可供其他页面使用)
194 1
前端存储之sessionStorage和localStorage
前端存储之sessionStorage和localStorage
317 0
前端祖传三件套HTML的HTML5之Web存储 localStorage/sessionStorage
HTML5 是 Web 技术的重要更新,其中包括一些新特性。其中之一就是 Web 存储。Web 存储允许我们在客户端(浏览器)中存储数据,而不必依赖服务器。本文介绍两种常见的 Web 存储:localStorage 和 sessionStorage。
243 0
前端项目实战228-ant design 5.0中localStorage一般存string
前端项目实战228-ant design 5.0中localStorage一般存string
105 0
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
295 14

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    73
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    132
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    4
  • 4
    docker安装nginx,前端项目运行
    29
  • 5
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
    20
  • 6
    详解智能编码在前端研发的创新应用
    32
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
    6
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    11
  • 10
    巧用通义灵码,提升前端研发效率
    70
  • 1
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    29
  • 2
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    21
  • 3
    巧用通义灵码,提升前端研发效率
    70
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    132
  • 5
    详解智能编码在前端研发的创新应用
    84
  • 6
    智能编码在前端研发的创新应用
    46
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    28
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    87
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    67
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    24