浏览器本地存储localstorage,sessionStorage

2024-03-10 20:20

本文主要是介绍浏览器本地存储localstorage,sessionStorage,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

浏览器本地存储localstorage,sessionStorage

文章目录

  • 一、localstorage
    • localstorage存储
    • localstorage读取
    • localstorage删除
    • localstorage清空
  • 二、sessionStorage
    • localstorage读取
    • localstorage删除
    • localstorage清空
  • 总结


一、localstorage

即使浏览器关闭,本地回话存储还是会存在

localstorage存储

function saveData(){
localStorage.setItem( 'msg', 'hello!!!')
localStorage.setItem( 'msg2',666)
localStorage.setItem( 'person',JsON.stringify(p))
}

localstorage读取

localStorage.getItem('msg')
localStorage.getItem('msg2')
const result =  localStorage.getItem('person')
console.log(JSON.parse(result))

localstorage删除

localStorage.deleteItem('msg')

localstorage清空

localStorage.clear('msg')

二、sessionStorage

浏览器一关闭,则消失

function saveData(){
sessionStorage.setItem( 'msg', 'hello!!!')
sessionStorage.setItem( 'msg2',666)
sessionStorage.setItem( 'person',JsON.stringify(p))
}

localstorage读取

sessionStorage.getItem('msg')
sessionStorage.getItem('msg2')
const result =  sessionStorage.getItem('person')
console.log(JSON.parse(result))

localstorage删除

sessionStorage.deleteItem('msg')

localstorage清空

sessionStorage.clear('msg')

总结

1、localstorage,sessionStorage统称为WebStorage
2、存储内容大小一般为5MB左右,不同浏览器可能不一样
3、浏览器通过window.localstorage和window.sessionStorage的属性方法实现本地存储机制
4、如果对应获取不到属性值则返回null

这篇关于浏览器本地存储localstorage,sessionStorage的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/795400

相关文章

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe

k8s搭建nfs共享存储实践

《k8s搭建nfs共享存储实践》本文介绍NFS服务端搭建与客户端配置,涵盖安装工具、目录设置及服务启动,随后讲解K8S中NFS动态存储部署,包括创建命名空间、ServiceAccount、RBAC权限... 目录1. NFS搭建1.1 部署NFS服务端1.1.1 下载nfs-utils和rpcbind1.1

Redis高性能Key-Value存储与缓存利器常见解决方案

《Redis高性能Key-Value存储与缓存利器常见解决方案》Redis是高性能内存Key-Value存储系统,支持丰富数据类型与持久化方案(RDB/AOF),本文给大家介绍Redis高性能Key-... 目录Redis:高性能Key-Value存储与缓存利器什么是Redis?为什么选择Redis?Red

Git打标签从本地创建到远端推送的详细流程

《Git打标签从本地创建到远端推送的详细流程》在软件开发中,Git标签(Tag)是为发布版本、标记里程碑量身定制的“快照锚点”,它能永久记录项目历史中的关键节点,然而,仅创建本地标签往往不够,如何将其... 目录一、标签的两种“形态”二、本地创建与查看1. 打附注标http://www.chinasem.cn

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异:对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理,目前我用的MP的版本

使用Spring Cache本地缓存示例代码

《使用SpringCache本地缓存示例代码》缓存是提高应用程序性能的重要手段,通过将频繁访问的数据存储在内存中,可以减少数据库访问次数,从而加速数据读取,:本文主要介绍使用SpringCac... 目录一、Spring Cache简介核心特点:二、基础配置1. 添加依赖2. 启用缓存3. 缓存配置方案方案

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

使用Java读取本地文件并转换为MultipartFile对象的方法

《使用Java读取本地文件并转换为MultipartFile对象的方法》在许多JavaWeb应用中,我们经常会遇到将本地文件上传至服务器或其他系统的需求,在这种场景下,MultipartFile对象非... 目录1. 基本需求2. 自定义 MultipartFile 类3. 实现代码4. 代码解析5. 自定