JavaScript 本地存储

文章目录

1.本地存储简介
2.window.sessionStorage
3.window.localStorage
4.记住用户名

1.本地存储简介

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5 规范提出了相关解决方案。

特性：
① 数据存储在用户浏览器中；
② 设置、读取方便，甚至页面刷新不丢数据；
③ 容量较大，sessionStorage 约5M、localStorage 约20M；
④ 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

2.window.sessionStorage

特点：
① 生命周期为关闭浏览器窗口；
② 在同一个窗口（页面）下数据可以共享；
③ 以键值对的形式存储使用。

//1.存储数据
sessionStorage.setItem(key, value);
//2.获取数据
sessionStorage.getItem(key);
//3.删除数据
sessionStorage.removeItem(key);
//4.清空所有数据
sessionStorage.clear();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" class="uname" /><input type="password" class="upwd" /><button class="set">保存数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="clear">清空所有数据</button><script>var ipts = document.querySelectorAll('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var clear = document.querySelector('.clear');set.addEventListener('click', function() {sessionStorage.setItem('uname', ipts[0].value);sessionStorage.setItem('upwd', ipts[1].value);})get.addEventListener('click', function() {uname = sessionStorage.getItem('uname');upwd = sessionStorage.getItem('upwd');alert(uname + '，' + upwd);})remove.addEventListener('click', function() {sessionStorage.removeItem('uname');sessionStorage.removeItem('upwd');})clear.addEventListener('click', function() {sessionStorage.clear();})</script>
</body>
</html>

运行结果：

你可以通过 F12 键到我们的后台去查看，Application → Session Storage → file://

只要没关闭浏览器窗口，不管怎么刷新页面数据永远都在！

3.window.localStorage

特点：
① 生命周期永久生效，除非手动删除，否则即使关闭页面信息也会存在；
② 可以多窗口（页面）共享（同一浏览器）；
③ 以键值对的形式存储使用。

//存储数据
localStorage.setItem(key, value);
//2.获取数据
localStorage.getItem(key);
//3.删除数据
localStorage.removeItem(key);
//4.清空所有数据
localStorage.clear();

4.记住用户名

案例分析：
① 把数据存起来，用到本地数据；
② 关闭页面，也可以显示用户名，所以用到 localStorage；
③ 打开页面，先判断是否有这个用户名，如果有，就在表单里显示用户名，并且勾选复选框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="username"><input type="checkbox" name="" id="remember"> 记住用户名<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;}remember.addEventListener('change', function() {if(this.checked) {localStorage.setItem('username', username.value);} else {localStorage.removeItem('username');}})</script>
</body>
</html>

JavaScript 本地存储相关推荐

详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
性能：15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
JavaScript本地存储
sessionStorage 同一个窗口本地存储信息先设置数据 sessionStorage.setItem('username','张三'); sessionStorage.setItem('ag ...
Javascript本地存储的方式有哪些？区别及应用场景？
# 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB # cookie Cookie,类型为 ...
JavaScript——本地存储用户名存储案例
一.本地存储 1.1 本地存储特性 1.数据存储在用户浏览器中 2.设置.读取方便.甚至页面刷新不丢失数据 3.容量大,sessionStorage约5M.localStorage约2 ...
JavaScript本地存储详解
目录 1.作用 2.特点 3.localStorage使用 4.sessionStorage使用 5. localStorage和sessionStorage的区别 6.本地存储使用过程中的注意事项 ...
JavaScript本地存储实践（html5的localStorage和ie的userData）的实例页面
本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Op ...
JavaScript 本地存储、sessionStorage和localStorage
文章目录本地存储特性 window.sessionStorage window.localStorage 案例:记住用户名本地存储特性 window.sessionStorage 存储数据: se ...
＜今日份知识点：Javascript本地存储的方式有哪些？区别及应用场景？＞
文章目录