本地化存储的意思是，把一些数据存储到客户端
大家都知道浏览器会自动的缓存你浏览过的一些图片，文本。以便让你下次浏览该网页的时候可以省去等待的时间。
web本地存储的发展：
55119156.png
当然，在H5本地存储发布之前，也有各种API的出现。如上图，在这里我就不进行一一介绍了，因为现在各大浏览器都已经不支持使用（唯有cookie 还在使用），具体情况自行谷歌。
注：本文旨在浅易的带你认识H5本地存储，如有不足之处，还请各位海涵，同时欢迎指出学习，谢谢！
localStorage和sessionStorage
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储（在浏览器关闭，然后重新打开后数据仍然存在。）
sessionStorage - 针对一个 session 的数据存储（与上面的刚好是相反的，重新打开浏览器是不存在的）
这两种机制是通过 Window.sessionStorage和 Window.localStorage 属性使用，调用其中任一对象都会创建 Storage对象，可以设置、获取和移除数据项。对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage 对象——独立运行和控制。
例如，在文档中调用 localStorage 将会返回一个 Storage对象；调用 sessionStorage 返回一个不同的 Storage对象。可以使用相同的方式操作这些对象，但是操作是独立的。
总结：localStorage和sessionStorage具有相同的api，因为他们都是Storage类型的对象。
方法
storage.key(index)
返回存储对象第 index 个数据项的键名。index 从 0开始
storage.getItem(keyName)
接受一个键名（key name）作为参数，并返回对应键名的值（key's value）。
storage.setItem(keyName, keyValue)
接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。
storage.removeItem(keyName)
接受一个键名作为参数，会把该键名和对应的键值从存储中移除。(删除键值对)
storage.clear()
清空存储对象里所有的键值
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width:1300px;
height:600px;
}
</style>
</head>
<body>
<input type="color">
<select name="" id="select">
<option value="bg (1).jpg">图片一</option>
<option value="bg (1).png">图片二</option>
<option value="bg (2).jpg">图片三</option>
</select>
<br>
<img src="" alt="">
<script>
var colorInput = document.querySelector("input");
var imgSelect = document.querySelector("#select");
var img = document.querySelector("img");
//如果已经存储过，则直接设置样式。
if(localStorage){
setStyle();
}
colorInput.onchange = saveSetting;
imgSelect.onchange = saveSetting;
/*向localStorage 中存储数据*/
function saveSetting() {
var storage = window.localStorage;
storage.setItem("bc",colorInput.value);
storage.setItem("imgSrc",imgSelect.value);
setStyle();
}
/*从 localStorage 中读取数据，并设置相应的样式*/
function setStyle() {
document.body.style.backgroundColor = window.localStorage.getItem("bc");
colorInput.value = window.localStorage.getItem("bc");
img.src = window.localStorage.getItem("imgSrc");
imgSelect.value = window.localStorage.getItem("imgSrc");
}
</script>
</body>
</html>
效果图：
image.png
网友评论