localStoragesessionStorage
Posted sunjuncoder
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStoragesessionStorage相关的知识，希望对你有一定的参考价值。
既然涉及到html5知识，那么必定会存在一定的兼容性问题，这里就涉及到浏览器的支持情况了。
浏览器支持情况：
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.
这里涉及到两种方式，即localStorage与sessionStorage
（1）、localStorage：
localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
优点：
虽然存储大小有限制，但是相对于cookie而言，要大得多。
缺点：
需要手动删除，否则长期存在
浏览器大小不一，版本的支持也不一样
localStorage只支持string类型的存储，JSON对象需要转换
常见用法有：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储
（2）、sessionStorage：
sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失
特点：
- 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
- 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据
- 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。)。
- 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage，如：
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
这里以localStorage为例来说明（例子是直接从别处copy来的，但这不是重点）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if (localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}else{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
在这里我分别使用了Chrome、Firefox、Safari、QQ、IE（我电脑用的是IE11）、Edge等浏览器来进行测试，发现在Chrome、Firefox、Safari、QQ浏览器上能够实现预期的效果，而在IE与Edge浏览器上则无法达到预期的效果。本来以为浏览器缓存的原因，在清楚缓存后依旧无效，顿时产生了IE浏览器是否支持localStorage的想法，这里以一个小demo来测试下：
<script>
if(window.localStorage){
alert("support")
}else{
alert("not support")
}
</script>
结果IE浏览器下结果为：
以上是关于localStoragesessionStorage的主要内容，如果未能解决你的问题，请参考以下文章
localStoragesessionStorages 使用