html5可以保存到本地，html5中推出了2种本地存储的方式，分别是：1、localstorage，用于长久保存网站的数据，保存的数据没有过期时间，可手动删除；2、sessionstorage，sessionstorage存储的数据在用户关闭浏览器窗口后，数据会被删除。
本教程操作环境：windows10系统、html5版、dell g3电脑
html5可以保存到本地吗？
可以。
html5中web本地存储
1.1.1 什么是html5web本地存储（web存储）？
html5web本地存储可以在本地存储用户的浏览数据。web本地存储相对cookie更加安全和快速，它的数据不会保存在服务器上。它也可以存储大量的数据，而不影响网站的性能。
html5推出了2种本地存储的方式：localstorage和sessionstorage 。
1.1.2 客户端存储数据localstorage
用于长久保存网站的数据(它不会随着我们关闭浏览器而消失)，保存的数据没有过期时间，可手动删除（就是通过js脚本删除--删除单个，删除所有）。
localstorage是一个对象，我们通过typeof检测 localstorage数据类型。检测的结果是其数据类型是object。
常用api如下：
保存数据：localstorage.setitem(key,value);
读取数据：localstorage.getitem(key);
删除单个数据：localstorage.removeitem(key);
删除所有数据：localstorage.clear();
获取得到某个索引的key：localstorage.key(index);
注意：键/值对 --- 通常以字符串存储
如：
首先，我们申明一个变量存储用户名username，赋值为tom。这是这个值被存储到客户端的localstorage中。
<script> localstorage.username = '张一'; </script>
预览：
接着，我们注释掉localstorage.username = '张一';
<script> // localstorage.username = '张一'; console.log(localstorage.username); </script>
然后我们打印localstorage.username，这时，我们在控制台会看到username的值被打印出来了。
预览：
保存数据：
localstorage.setitem(key,value);
localstorage.setitem(key:string, value:string) 其中key的数据类型是字符串string；value的数据类型是字符串string。
<script> localstorage.setitem('age','18') localstorage.setitem('sex','男') localstorage.setitem('tel','15856567131') </script>
预览：
读取数据：localstorage.getitem(key);
// localstorage 获取数据 var uname=localstorage.getitem('uname') console.log(uname); var age=localstorage.getitem('age') console.log(age, typeof age); var tel=localstorage.getitem('tel') console.log(tel, typeof tel);
预览：
删除单个数据：localstorage.removeitem(key);
<script> localstorage.removeitem('tel');</script>
预览：
删除所有数据：localstorage.clear();
<script> localstorage.clear();</script>
预览：
获取得到某个索引的key：localstorage.key(index);
//在控制台中查看localstorage 是否有数据 如果length=0代表无数据 console.log(localstorage);//获取某个索引的key var k0=localstorage.key(0) console.log(k0); var k1=localstorage.key(1) console.log(k1);
预览：
注意：键/值对 --- 通常以字符串存储
localstorage获取的值是一个字符串，如果我们要进行“计算”，我们需要将字符串用number() 将字符串转成数字，然后再参与计算。
<script> // 向localstorage对象中保存数据 localstorage.setitem('num1',100) localstorage.setitem('num2',200) // 读取数据 var num1 = localstorage.getitem('num1') console.log(num1, typeof num1) var num2 = localstorage.getitem('num2') var sum = number(num1) + number(num2); console.log(sum)</script>
预览：
表单中输入框中输入的内容自动存入localstorage中，并在刷新页面后显示出来。
<div class="box"> <label for="search">搜索</label> <input type="text" name="" value="" id="search"> <br> <h1 id="r"></h1> </div>
<style> .box{ width: 500px; margin:60px auto; } </style>
<script> // 表单中输入框中输入的内容自动存入localstorage中，并在刷新页面后显示出来。 //抓取元素 var search =document.getelementbyid('search') console.log(search); var h1=document.getelementbyid('r') console.log(h1); search.onchange=function(){ //向localstorage对象中保存数据 localstorage.setitem('mysearch',this.value) } window.onload=function(){ var result=localstorage.getitem('mysearch') console.log(result); r.innerhtml=result; if(localstorage.length>0){ localstorage.removeitem('mysearch') } } </script>
预览：
1.1.3 客户端存储数据sessionstorage
sessionstorage存储的数据在用户关闭浏览器窗口后，数据会被删除。
常用的api(和localstorage的api相同)如下所示：
保存数据：sessionstorage.setitem(key,value);
读取数据：sessionstorage.getitem(key);
删除单个数据：sessionstorage.removeitem(key);
删除所有数据：sessionstorage.clear();
获取得到某个索引的key: sessionstorage.key(index);
注意：键/值对 --- 通常以字符串存储
保存数据：sessionstorage.setitem(key,value);
//保存数据 sessionstorage.setitem('username','tom'); sessionstorage.setitem('age',19); sessionstorage.setitem('sex','男') sessionstorage.setitem('tel','13866002972') console.log(sessionstorage);
预览：
接着，我们关闭浏览器。再次打开浏览器，打开刚刚我们访问的这个文件的地址，查看application中sessionstorage中，看是否有数据。结果，我们发现sessionstorage中已经没有数据。如下所示：
由此，我们可以看到sessionstorage只是一次性保存数据。当我们关闭浏览器，或者关闭浏览器的一个窗口后，我们的数据会被删除。
读取数据：sessionstorage.getitem(key);
<script> var username=sessionstorage.getitem('username') console.log(username); </script>
删除单个数据：sessionstorage.removeitem(key);
<script> sessionstorage.removeitem('age'); </script>
删除所有数据：sessionstorage.clear();
<script> sessionstorage.clear();</script>
获取得到某个索引的key: sessionstorage.key(index);
<script> var k0=sessionstorage.key(3) console.log(k0); </script>
预览：
1.2 html5中mathml数学标记语言html5 可以在文档中使用 mathml 元素，对应的标签是 <math>...</math> 。
mathml 是数学标记语言，是一种基于xml（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
<div> <!-- sup上标标签 --> 3<sup>3</sup> </div> <div> <!-- sub下标标签 --> h<sub>2</sub> </div> <div> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <msup> <mi>a</mi><mn>2</mn> <mo>+</mo> </msup> <msup> <mi>b</mi><mn>2</mn> <mo>=</mo> </msup> <msup> <mi>c</mi><mn>2</mn> </msup> </mrow> </math> </div>
预览：
关于上标 下标，不推荐这样写。我们正常使用html中的上标sup和下标sub去写。
推荐学习：《html5视频教程》
以上就是html5可以保存到本地吗的详细内容。