1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

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

小编小本本 • • VPS运维

了解本地存储特性

本地存储是指将数据存储在用户浏览器中，具备可设置、方便读取，甚至页面刷新不丢失数据的特性。容量方面，sessionStorage约5M、localStorage约20M，但只能存储字符串，可以将对象JSON.stringify()编码后存储。

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

window.sessionStorage

sessionStorage生命周期为关闭浏览器窗口，在同一个窗口页面下数据可以共享，以键值对的形式存储使用。

  • 设置数据：sessionStorage.setItem(key,value)
  • 获取数据：sessionStorage.getItem(key)
  • 删除数据：sessionStorage.removeItem(key)
  • 清空数据：sessionStorage.clear()

以下是一个练习：




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();
});

window.localStorage

localStorage生命周期永久生效，除非手动删除，否则关闭页面也会存在。可以多窗口页面共享（同一个浏览器），以键值对的形式存储。

  • 存储数据：localStorage.setItem(key,value)
  • 获取数据：localStorage.getItem(key)
  • 删除数据：localStorage.removeItem(key)
  • 清除所有数据：localStorage.clear()

以下是一个练习：




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();
});

最后，本篇还介绍了JavaScript本地存储实现用户名存储的方法。在勾选记住用户名时，可以将数据存储到本地存储中并在关闭页面再次打开时自动显示上次登录的用户名。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7166.html

赞 (0)
小编小本本小编小本本
« 上一篇 2023年4月16日 am8:00
下一篇 » 2023年4月16日 am8:00

相关推荐