localStorage

localstorage入门

数据存储

数据存储分为服务端的和客户端的，服务端的存储分为数据库技术和session技术，数据库一般存储项目中的核心数据，session存储当前用户的信息。
客户端一般存储的都是不太要紧的客户端数据，
他的存储有 cookie，Flash ，HTML5中的WebStorage，IndexedDB；其中Flash已经被淘汰；cookie使用的较频繁 大小不能 超过4KB；WebStorage 使用简单 大小不超过8MB 有兼容性的问题，ie9以后可用； IndexedDB 客户端直接存储对象，不是HTML标准技术， 大小没有限制。

WebStorage

两个接口 四个函数
两个接口 ：
window.sessionStorage 会话级存储
window.localStorage 本地储存
四个函数：
setItem、getItem、removeItem和clear

localStorage

前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值。
localStorage 类似于 sessionStorage，区别在于，数据存储在 localStorage 是无期限的，除了删除否则永久保存，而数据存储在 sessionStorage 会被清除，当页面会话结束时——也就是说当页面被关闭后自动消除数据。注意的是 客户端或浏览器中必须来自同一域名的所有页面都可访问localStorage数据，但客户端或浏览器之间的数据相互独立。

方法

1.存值 因为localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem(key, value)方法

// 自身setItem方法
localStorage.setItem("user","amy");
// []方法
localStorage["user"]="amy";
// .方法
localStorage.user="amy";

2.取值也是一样，自身的getItem(key)方法

// 自身getItem方法
localStorage.getItem("user");
// []方法
localStorage["user"];
// .方法
localStorage.user;

3.移除某一个值，可以通过对象删除属性的关键字delete也可以用自身的方法removeItem(key)

// 自身方法
localStorage.removeItem("user");
// []方法
delete localStorage["user"];
// .方法
delete localStorage.user

4.清空 localStorage 中所有键值对。clear()

 localStorage.clear();

5.获取所有的key
localStorage有length属性 获取localStorage 内键值对的数量。

// 通过自身的key
for (var i = 0;i < localStorage.length; i++) {
	  var key = localStorage.key(i);//获取第i个key
       var value = localStorage[key];//获取第i个value
       console.log(key, value)
}
// 通过for in 循环获取
for(var key in localStorage){
	console.log(key);
}

6.存取对象（复杂值）
localStorage 只能存字符串，所以数组/对象等复杂值要先用 JSON.stringify() 转换成字符串，取出来时再用 JSON.parse() 转换成复杂值再使用。

let arr = [1, 2, 3]
localStorage.setItem('arr', arr)
localStorage.getItem('arr') // "1,2,3"
// JSON.stringify()
localStorage.setItem('arr', JSON.stringify(arr))
localStorage.getItem('arr') // "[1,2,3]"
JSON.parse(localStorage.getItem('arr')) // [1, 2, 3]

7.修改 让 window 监听 localStorage 的 storage，一个标签的 localStorage 发生改变时，其它标签做出相应的响应。
第一个页面改变了localStorage

<input type="text" id="input" />
<button onclick="setStorage ()">提交</button>
<script type="text/javascript">
    function setStorage () {
        localStorage.user = document.getElementById('input').value
    }
</script>

第二个页面响应localStorage的改变

<script type="text/javascript">
    window.addEventListener('storage', e => {
        console.log(e.key, e.newValue) // user amy
    })
</script>

注意
1.localStorage特定于页面的协议，不是同一域名，不能访问。
2.有长度限制，5MB左右，不同浏览器大小会有不同。
3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。
4.浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。
5.兼容IE8以上浏览器