Html5 web 本地存储 （localStorage、sessionStorage）

HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage

1. sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

2. localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

web storage的浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){
alert("浏览支持localStorage") 
}
else
{ 
alert("浏览暂不支持localStorage") 
} 
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

API

1，保存数据到本地

sessionStorage.setItem('key', value)   //name 是本地存储的值的名字， value是本地存储值，注意value必须是字符串的形式

localStorage.setItem('key', value)   //setItem把值存到本地，其中name 是本地存储的值的名字， value是本地存储值，注意value必须是字符串的形式

2，从本地获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));

var data2 = JSON.parse(localStorage.getItem('key'));

3，从本地删除某个数据

sessionStorage.removeItem('key');

localStorage.removeItem('key');

4，删除所有保存在本地的数据

sessionStorage.clear();

localStorage.clear();

chrome浏览器查看的方法

按F12,然后选择application就可以看到了

 

Cookie、session和localStorage、以及sessionStorage之间的区别:https://blog.csdn.net/ruby_xc/article/details/65939988

转载于:https://www.cnblogs.com/lyyguniang/p/9024734.html