localStorage学习笔记

今天看到一个网页在提交表单信息的时候用到了localStorage，记录一下。

localStorage属性允许你访问一个 session对象，且在localStorage中存储的数据不会设置过期时间。

// 首先判断页面是否支持使用localStorage
// 官网的方法
if(window.localStorage) {
  xxxxx
}

// 方法2
if(typeof localStorage === 'object') {
  xxxxx
}

// 在localStorage中储存数据
var name = 'Llane';
localStorage.setItem("user_name", name); //name也可以是一个数组

// 获取localStorage中的数据
var username = localStorage.getItem("user_name");
if(username != null) {
  xxxxx
}

提交表单的使用场景：
当登录表单页时，可以先去判断localStorage中是否已经存在对应的数据，
若有则可以自动补充填写
若没有则可在提交时，在localStorage中储存对应的数据

在chrome浏览器的开发者工具-> Application -> Storage -> Local Storage 中的可以看到当前页面的localStorage

2018-8-30
补充：
localStorage是遵循同源策略的。同源策略是指浏览器出于网站安全性的考虑，限制不同源之间的资源相互访问的一种政策。

比如：
http://a.com/1.html
https://a.com/1.html
http://b.a.com/1.html
即使上面三者用的是同一个页面同一段js，浏览器也会因为三者不同源而去储存三份各自独立的localStorage

另外
1.localStorage的兼容性很不错，移动端基本都可以用。localStorage兼容性
2.由于浏览器不会自动清除localStorage的内容，为了防止重复命名，建议命名时候尽量复杂一些。

more:
MDN - Window.localStorage
MDN - LocalStorage