HTML5的localStorage缓存详解
<p><strong>什么是localStorage</strong></p><p>HTML5加入了localStorage，作为客户本地存储文件，之前用cookie，但是每条cookie空间为4K localStorage 支持5M<br>一张图了解下客户端浏览器的存储发展史<br><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhLWVyLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIwLzAyL3VzZXJkYXRhLmpwZWc?x-oss-process=image/format,png" alt="" width="600" height="202" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhLWVyLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIwLzAyL3VzZXJkYXRhLmpwZWc?x-oss-process=image/format,png"><span class="cke_reset cke_widget_drag_handler_container"><img class="cke_reset cke_widget_drag_handler" title="点击并拖拽以移动" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="15" height="15" data-cke-widget-drag-handler="1"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><br><strong>浏览器支持情况</strong></span></span></span></p>
<table border="1">
<thead>
<tr><th>Feature</th><th>Chrome</th><th>Firefox</th><th>Internet Explorer</th><th>Opera</th><th>Safari</th><th>Android</th><th>Opera Mobile</th><th>Safari Mobile</th></tr>
</thead>
<tbody>
<tr>
<td>localStorage</td>
<td>4</td>
<td>3.5</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
<td>2.1</td>
<td>11</td>
<td>iOS 3.2</td>
</tr>
<tr>
<td>sessionStorage</td>
<td>5</td>
<td>2</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
<td>2.1</td>
<td>11</td>
<td>iOS 3.2</td>
</tr>
</tbody>
</table>
<p> </p>
<p>特点</p>
<p>1. 字符串存储：localStorage存储的值均为String 字符串<br>把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。月小升试过音乐也可以转成字符串存。<br>2. 无法隐私：localStorage在浏览器的隐私模式下不可用<br>3. 爬虫情况：无法读取localStorage<br>4. 无法跨域： a.com 的localStorage 无法被b.com 直接读取<br>5. 过期时间：一直有效，客户不主动清空，那么数据一直在</p>
<p> </p>
<p><strong>判断localStorage</strong></p>
<pre>if(!window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//开始浪
}</pre>
<p> </p>
<p>HTML5 localStorage 增删改遍历</p>
<p><strong>1. HTML5 写入localStorage</strong><br>标准写法</p>
<p> </p>
<pre>var storage=window.localStorage;
storage.setItem("name","tom");</pre>
<p>官方不太推荐，但是支持的写法</p>
<pre>storage["name"]="tom";
storage.name="tom";</pre>
<p><strong>2. HTML5 读取localStorage</strong><br>标准写法</p>
<pre>var a1=storage.getItem("name");</pre>
<p>官方不太推荐，但是支持的写法</p>
<pre>var a2=storage.name;
var a3=storage["name"];</pre>
<p><strong>3. HTML5 更新localStorage</strong></p>
<p>更新？html5的localStorage 存的时候是单键值对 key-value模式，重新写一遍name就是更新了</p>
<pre>storage.setItem("name","Jack");</pre>
<p><strong>4. HTML5 删除localStorage</strong></p>
<pre>storage.removeItem("name");</pre>
<p><strong>5. HTML5 遍历localStorage 所有key 和 value数据</strong></p>
<pre>var storage=window.localStorage;
storage.setItem("name1","tom");
storage.setItem("name2","jack");
storage.setItem("name3","Lucy");
for(var i=0;i<storage.length;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + " - " + value);
}</pre>
<p><strong>6. HTML5 测试代码</strong></p>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试localStorage</title>
</head>
<script>
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
storage.setItem("a","tom");
console.log(typeof storage["a"]);
//第一种方法读取
var a1=storage.getItem("a");
console.log(a1);
}
</script>
<body>
</body>
</html></pre>
<p> </p>
<p>https://java-er.com/blog/html5-localstorage-all</p>
<p>MORE================</p>
<ul id="tags_related">
<li>html5 localStorage缓存音乐和视频</li>
<li>H5 localStorage 缓存图片</li>
<li>H5 本地缓存localStorage缓存计数器</li>
</ul>
<div data-cke-filler-webkit="end" data-cke-temp="1"> </div><br><br>
来源：https://www.cnblogs.com/yuexiaosheng/p/12362854.html
頁:
[1]