JavaScript本地存储实现用户名存储示例

3403771864 发布于2022-11-23 22:02 / 314人阅读

　　一、本地存储

　　1.1 了解本地存储特性

　　1、数据存储在用户浏览器中

　　2、需要设置、读取方便、甚至页面刷新不丢失数据

　　3、容量大，sessionStorage约5M、localStorage约20M

　　4、只能存储字符串，可以将对象JSON.stringify()编码后存储

　　1.2 window.sessionStorage

　　1、生命周期为关闭浏览器窗口

　　2、在用一个窗口页面下数据可以共享

　　3、以键值对的形式存储使用

　　设置数据

　　sessionStorage.setItem(key, value)

　　获取数据

　　sessionStorage.getItem(key)

　　删除数据

　　sessionStorage.removeItem(key)

　　清空数据

　　sessionStorage.clear()

　　练习：

　　<input type="text">
　　<button class="set">存储数据</button>
　　<button class="get">获取数据</button>
　　<button class="remove">删除数据</button>
　　<button class="del">清空所有数据</button>
　　<script>
　　console.log(localStorage.getItem('username'));
　　var ipt = document.querySelector('input');
　　var set = document.querySelector('.set');
　　var get = document.querySelector('.get');
　　var remove = document.querySelector('.remove');
　　var del = document.querySelector('.del');
　　set.addEventListener('click', function() {
　　// 当我们点击了之后，就可以把表单里面的值存储起来
　　var val = ipt.value;
　　sessionStorage.setItem('uname', val);
　　sessionStorage.setItem('pwd', val);
　　});
　　get.addEventListener('click', function() {
　　// 当我们点击了之后，就可以把表单里面的值获取过来
　　console.log(sessionStorage.getItem('uname'));
　　});
　　remove.addEventListener('click', function() {
　　//
　　sessionStorage.removeItem('uname');
　　});
　　del.addEventListener('click', function() {
　　// 当我们点击了之后，清除所有的
　　sessionStorage.clear();
　　});
　　</script>

　　1.3 window.localStorage

　　1、生命周期永久生效，除非手动删除，否则关闭页面也会存在

　　2、可以多窗口页面共享（同一个浏览器）

　　3、以键值对的形式存储

　　存储数据

　　localStorage.setItem(key, value)

　　获取数据

　　localStorage.getItem(key)

　　删除数据

　　localStorage.removeItem(key)

　　清除所有数据

　　localStorage.clear()

　　练习：

　　<input type="text">
　　<button class="set">存储数据</button>
　　<button class="get">获取数据</button>
　　<button class="remove">删除数据</button>
　　<button class="del">清空所有数据</button>
　　<script>
　　var ipt = document.querySelector('input');
　　var set = document.querySelector('.set');
　　var get = document.querySelector('.get');
　　var remove = document.querySelector('.remove');
　　var del = document.querySelector('.del');
　　set.addEventListener('click', function() {
　　var val = ipt.value;
　　localStorage.setItem('username', val);
　　})
　　get.addEventListener('click', function() {
　　console.log(localStorage.getItem('username'));
　　})
　　remove.addEventListener('click', function() {
　　localStorage.removeItem('username');
　　})
　　del.addEventListener('click', function() {
　　localStorage.clear();
　　})
　　</script>

　　用户名存储案例

　　在勾选记住用户名，当我们再次打开浏览器，就在文本框里面自动显示上次登录的用户名

　　案例分析：

　　1、将数据存储到本地存储

　　2、关闭页面再打开也可以显示用户名，这时候就要用到localStorage

　　3、打开页面需要先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

　　4、当复选框发生改变的时候change事件

　　5、如果勾选，就存储，否则就移除

　　<input type="text" name="username" id="username" value="" placeholder="请输入用户名"/>
　　<input type="checkbox" id="rusername"> 记住用户名
　　<script type="text/javascript">
　　var username = document.querySelector('#username');
　　var rusername = document.querySelector('#rusername');
　　// 先判断用户是否需要记录数据 再让记录的数据显示再表单里面
　　if(localStorage.getItem('username')){
　　username.value=localStorage.getItem('username');
　　rusername.checked = true;
　　}
　　// change改变时 发生 Checkbox选中和不选中时 发生
　　rusername.addEventListener('change',function(){
　　// console.log('改变了');
　　// console.log(rusername.checked);
　　if(this.checked){
　　localStorage.setItem('username',username.value);
　　}else{
　　localStorage.removeItem('username');
　　}
　　})
　　</script>

　　本篇关于JavaScript本地存储实现用户名存储内容已讲述完毕。欢迎大家观看更多精彩内容。

私有云服务器托管 js实现本地存储 js本地存储实现 html本地存储实现 h5本地存储实现购物车

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128383.html

JavaScript是如何工作的:存储引擎+如何选择合适的存储API

摘要：字节流这个简单的模型将数据存储为长度不透明的字节字符串变量，将任何形式的内部组织留给应用层。字节流数据存储的代表例子包括文件系统和云存储服务。使用同步存储会阻塞主线程，并为应用程序的创建冻结体验。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 16 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它...

draveness 2019-08-23 14:58 评论0 收藏0
javascript-离线应用于客户端存储

摘要：离线检测含义设备能否上网代码注和，和最新的没问题应用缓存缓存的目的是专门为网页离线设计的，当然在在线情况也会缓存机制当用户在地址输入请求的地址去请求网页时，浏览器会先本地缓存中查看是否有对应的缓存文件，如果有然后查看新鲜度就是是否过期了，如 23.1 离线检测含义：设备能否上网代码： navigator.onLine 注：IE6+和safari+5，firefox3+和ope...

gecko23 2019-08-23 15:21 评论0 收藏0
HTML5 入门详解

摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...

hqman 2019-08-26 13:25 评论0 收藏0
HTML5 入门详解

摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...

silenceboy 2019-08-05 18:09 评论0 收藏0
阻止广告：JavaScript实现Chrome插件实例分析

摘要：以下示例将阻止所有对的请求。从存储请求和阻止请求的对象中删除当前选项卡的属性。收听消息告知后台进程阻止的列表已被用户更新。两者都提供类似的功能和事件处理程序。前言当我们浏览网站时，都会发送许多请求来获取网页内容。这些请求中有些是重要的，而有些是我们不需要，因为它们可能是广告或建议等。在本文中，将创建一个有助于阻止和取消阻止所选URL的Chrome扩展插件，让你选择你打开的网址及该打...

Sike 2019-08-22 11:03 评论0 收藏0