HTML5 提供了两种在客户端存储数据的新方法：localStorage与 sessionStorage.
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie 速度很慢而且效率也不高。简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分，而后来由于有些工作组的人表示HTML5太庞大了，于是就剥离出来作为一个单独的标准。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用JavaScript来存储和访问数据。任何可以物理上能访问你的计算机的人都有可能看看到你的HTML5的本地数据库，在你的浏览器中，任何网站都可以读取和修改他们自己存储的数据，但是不能不同站点的存储数据不能相互访问。
HTML5 localStorage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cooki都会被发送过去。HTML5的localStorage是存储在你本地的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。
一、检测你的浏览器是否支持HTML localStorage特性
（1）如果你的浏览器支持该特性的话，那么全局对象：window上会有一个localStorage的属性，反之，你的浏览器不支持的话，那么该属性值为undefined。可以封装成一个函数：
function supportLocalStorage(){
return !!window.localStorage;
}
if(!supportLocalStorage()){
alert("您的浏览器不支持localStorage特性，请更新您的浏览器!"
}
支持localStorage的浏览器：IE 8+, Firefox 3.0+, Safari 4.0+, Chrome 4.0+, Opera 10.5+。
（2）Modernizr(http://www.modernizr.com/)是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。modernizr通过JS检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的<html>标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，modernizr就会在<html>标签上添加video类，否则，添加no-video类。可用firebug之类的调试工具查看页面<html>标签中的class。modernizr的用法很简单，仅仅在页面中引入库的js文件即可：
<script type="text/javascript" src="modernizr-1.5.js"></script>
二、使用Web Storage
（1）localstorage方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
localstorage有setItem,getItem,removeItem,key,clear 5个方法，和length一个属性。localStorage中都是以 key/value的形式来存储数据的，存储的数据类型都是字符串，如果需要其他类型，需要自行转换。localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问localStorage：
<script type=”text/javascript”>
localStorage.lastname=”Smith”;
document.write(localStorage.lastname);
</script>
可以像对象字面量那样使用Web Storage：
localStorage.fresh = “vfresh.org”; //设置一个键值
var a = localStorage.fresh; //获取键值
delete localStorage[ //删除键值
或者使用它的API：
localStorage.setItem(“fresh”,“vfresh.org”); //设置一个键值
localStorage.getItem(“fresh”); //获取一个键值
localStorage.key(0); //获取指定下标的键的名称（如同Array）
localStorage.removeItem(“fresh”); //删除一个键值
localStorage.clear(); //清空storage
字面量方式比API更高效，也更方便，所以你懂的。
下面的例子对用户访问页面的次数进行计数：
<script type=”text/javascript”>
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
localStorage.pagecount=1;
}
document.write(“Visits “+ localStorage.pagecount + ” time(s).”);
</script>
（2）sessionStorage方法
sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个sessionStorage：
<script type=”text/javascript”>
sessionStorage.lastname=”Smith”;
document.write(sessionStorage.lastname);
</script>
下面的例子对用户在当前session 中访问页面的次数进行计数：
<script type=”text/javascript”>
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
sessionStorage.pagecount=1;
}
document.write(“Visits “+sessionStorage.pagecount+” time(s) this session.”);
</script>
来源：CSDN
作者：前端学习线路
链接：https://blog.csdn.net/webxuexi168/article/details/104283884