文章目录

前言
- 本地存储
- - 本地存储特性
一、目标
二、主要学习内容
- 1. window.sessionStorage
- - 1.1 sessionStorage的特性
  - 1.2 sessionStorage的示例
  - 1.3 sessionStorage 完整实例代码：
- 2. window.localStorage
- - 2.1 localStorage的特性
  - 2.2 sessionStorage的示例
  - 2.3 localStorage 完整示例代码：

提示：以下是本篇文章正文内容，下面案例可供参考

前言

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
以前我们可能会把大量数据存储到数据库，而且还要从服务器里面频繁获取再使用，这很麻烦，更何况有些功能的数据没必要存到数据库内。

本地存储特性

数据存储在用户浏览器中。
设置、读取方便、甚至页面刷新不丢失数据。
容量较大，sessionStorage约5M、localStorage约20M。
不要小看5M喔，大约能存储几百万个字呢。
只能存储字符串，可以将对象JSON.stringfy()编码后存储。

一、目标

能够写出sessionStorage数据的存储以及获取
能够写出localStorage数据的存储以及获取
能够说出它们两者的区别

二、主要学习内容

1. window.sessionStorage

1.1 sessionStorage的特性

生命周期为关闭浏览器窗口。
在同一个窗口（页面）下数据可以共享。
以键值对的形式存储使用。想存对象形式的数据可以用JSON.stringify(value)

1.2 sessionStorage的示例

1. 存储数据

sessionStorage.setItem(key,value)

1.1 代码示例：

<body><input type="text"><button class="set">存储数据</button><script>// 获取输入框和按钮元素var inp = document.querySelector('input')var set = document.querySelector('.set')给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式sessionStorage.setItem('user',val)})</script>
</body>

1.2 示例图片：

存储数据示例图：

试验的话打开控制台找到应用或Application → sessionStorage或会话存储空间
我的控制台是中文翻译了的。

还可以测试它的特性 - 生命周期为关闭浏览器窗口。只要你不关闭页面窗口，它会一直存在，刷新页面也没关系。

刷新页面示例图：

2. 获取数据

sessionStorage.getItem(key)

2.1 代码示例：

<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><script>var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式sessionStorage.setItem('user',val)})// 获取 获取数据按钮的元素var get = document.querySelector('.get')// 注册绑定事件get.addEventListener('click', function() {// 点击后打印输出获得的本地数据console.log(sessionStorage.getItem('user'))})</script>

2.2 示例图片：

获取本地存储数据图：

3. 删除数据

sessionStorage.removeItem(key)

3.1 代码示例：

<body><input type="text"><button class="remove">删除数据</button><script>var inp = document.querySelector('input')// 给按钮注册绑定点击事件var remove = document.querySelector('.remove')remove.addEventListener('click', function() {// 删除本地数据sessionStorage.removeItem('user')})</script>
</body>

3.2 示例图片：

4. 清空所有数据

sessionStorage.clear()

4.1 代码示例：

<body><input type="text"><button class="set">存储数据</button><button class="clear">清空所有数据</button><script>var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式sessionStorage.setItem('user',val)sessionStorage.setItem('pwd',val)})// 清空所有数据var clear = document.querySelector('.clear')clear.addEventListener('click', function() {// 清空所有数据sessionStorage.clear()})</script>
</body>

4.2 示例图片：

1.3 sessionStorage 完整实例代码：

<!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>08-本地存储sesstionStorage</title>
</head>
<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="clear">清空所有数据</button><script>var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式sessionStorage.setItem('user',val)sessionStorage.setItem('pwd',val)})// 获取数据var get = document.querySelector('.get')get.addEventListener('click', function() {console.log(sessionStorage.getItem('user'))})// 删除数据var remove = document.querySelector('.remove')remove.addEventListener('click', function() {sessionStorage.removeItem('user')})// 清空所有数据var clear = document.querySelector('.clear')clear.addEventListener('click', function() {sessionStorage.clear()})</script>
</body>
</html>

2. window.localStorage

2.1 localStorage的特性

生命周期永久生效，除非手动删除，否则关闭页面也会存在。
可以多窗口（页面）共享（同一浏览器可以共享）。
以键值对的形成存储使用。想存对象形式的数据可以用JSON.stringify(value)

2.2 sessionStorage的示例

1. 存储数据

localStorage.setItem(key,value)

1.1 代码示例：

<body><input type="text"><button class="set">存储数据</button><script> var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式localStorage.setItem('user',val)localStorage.setItem('pwd',val)})</script>
</body>

1.2 示例图片：

存储数据示例图：

在此我们可以再试验localStorage的特性 - 生命周期永久生效，除非手动删除，否则关闭页面也会存在。

关闭后重新打开此页面示例图：

此图有点久，看完此图后确实localStorage的生命周期一直存在，除非我们手动删除。

2. 获取数据

localStorage.getItem(key)

2.1 代码示例：

<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><script> var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式localStorage.setItem('user',val)localStorage.setItem('pwd',val)})// 获取数据var get = document.querySelector('.get')get.addEventListener('click', function() {// 获取数据并在控制台中打印输出console.log(localStorage.getItem('user'))})</script>
<body>

2.2 示例图片：

这里输出一个是因为我只写了一个输入user的console.log语句

3. 删除数据

localStorage.removeItem(key)

3.1 代码示例：

<body><input type="text"><button class="remove">删除数据</button><script> var inp = document.querySelector('input')var remove = document.querySelector('.remove')remove.addEventListener('click', function() {// 删除数据localStorage.removeItem('user')})</script>
</body>

3.2 示例图片：

4. 清理所有数据

localStorage.clear()

4.1 代码示例：

<body><input type="text"><button class="clear">清空所有数据</button><script> var inp = document.querySelector('input')var clear = document.querySelector('.clear')clear.addEventListener('click', function() {// 清空所有数据localStorage.clear()})</script>
</body>

4.2 示例图片：

试验可以多窗口（页面）共享（同一浏览器可以共享）。

在localStorage的页面中存储的数据：

我们换其他页面，并在其他页面中写入一段localStorage.getItem()输入语句，看看是否能获取到名为test的值
示例图：

在另一个html页面内写入：

console.log(localStorage.getItem(‘test’));
用来试验多窗口（页面）共享（同一浏览器可以共享）。

2.3 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>09-本地存储之localStorage</title>
</head>
<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="clear">清空所有数据</button><script> var inp = document.querySelector('input')var set = document.querySelector('.set')// 给按钮注册绑定点击事件set.addEventListener('click', function() {// 获取输入框的值var val = inp.value// 存储到本地 setItem(key,value)形式localStorage.setItem('user',val)localStorage.setItem('pwd',val)localStorage.setItem('test',val)})var get = document.querySelector('.get')get.addEventListener('click', function() {console.log(localStorage.getItem('user'))})var remove = document.querySelector('.remove')remove.addEventListener('click', function() {localStorage.removeItem('user')})var clear = document.querySelector('.clear')clear.addEventListener('click', function() {localStorage.clear()})</script>
</body>
</html>

JavaScript之本地存储相关推荐

javascript 实现本地存储
我们先完成一个本地存储的DB类. db = function() { var store = window.localStorage, doc = document.documentElement; ...
JavaScript的本地存储和会话存储
Storage 1 认识Storage WebStorage主要提供了一种机制,可以让浏览器提供一种比cookie更直观的key.value存储方式 : localStorage:本地存储,提供的是一 ...
JavaScript之本地存储使用
在前端我们有时候需要用到一些数据或者测试某些数据,但是我们不可能每次都需要向后端请求数据这时候我们可以使用前端本地存储方法来测试本地存储特性: 1.数据存储在用户浏览器当中 2.设置,读取方便,甚 ...
本地存储(Local Storage) 和会话存储(Session Storage)
我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和会话存储(Session Storage)有一个清晰的认识. 目录前提知识范例示例1:将键值对 ...
性能：15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
JavaScript本地存储
sessionStorage 同一个窗口本地存储信息先设置数据 sessionStorage.setItem('username','张三'); sessionStorage.setItem('ag ...
详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
Javascript本地存储的方式有哪些？区别及应用场景？
# 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB # cookie Cookie,类型为 ...
JavaScript——本地存储用户名存储案例
一.本地存储 1.1 本地存储特性 1.数据存储在用户浏览器中 2.设置.读取方便.甚至页面刷新不丢失数据 3.容量大,sessionStorage约5M.localStorage约2 ...

JavaScript之本地存储