js本地存储应用及详解
2021/7/19 23:08:05
本文主要是介绍js本地存储应用及详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、总结
2种本地存储方式 | 生命周期 | 数据共享 | 存储形式 | 方法 |
window.sessionStorage | 关闭浏览器 |
同一个窗口(页面) |
键值对 |
存储数据sessionStorage.setItem(key,value) 获取数据sessionStorage.setItem(key) 删除数据sessionStorage.removeItem(key) 删除所用数据sessionStorage.clear() |
window.localStorage | 生命周期永久生效,除非手动删除否则关闭页面也会存在 | 同一浏览器下的多个窗口(页面)可以共享 | 键值对 |
存储数据localStorage.setItem(key,value) 获取数据localStorage.getItem(key) 删除数据localStorage.removeItem(key) 删除所有数据localStorage.clear()she |
二、举例:记住用户名
html代码:
<body> <input type="text" id="username" placeholder="输入用户名"> <input type="checkbox" id="remember">记住用户名 </body>
js代码
<script> //获取元素 var usernamInput = document.querySelector('#username'); var remember = document.querySelector('#remember'); //1、打开网页,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框 if (window.localStorage.getItem('username')) { usernamInput.value = window.localStorage.getItem('username'); remember.checked = true; }; //2、给复选框注册change事件,如果复选框被勾选,就把数据存起来,用到本地村吃醋;相反如果去掉勾选,则移除该用户名 remember.addEventListener("change", function() { if (remember.checked) { window.localStorage.setItem('username', usernamInput.value); } else { window.localStorage.removeItem('username'); } }) </script>
效果
这篇关于js本地存储应用及详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist