在网页设计的过程中，localStorage是经常听到的一个词，也是前端进阶过程中，你必须要掌握的。今天，就来为大家介绍一下localStorag。
概念
localStorage本地存储，它是window对象的一个属性，用于长久保存一个网站的数据。你可以简单的理解为它是一个前端的数据库，大小是5M。localStorage的生命周期是永久，除非用户手动的将loaclStorage清除，否则其中的数据会永久保存。
需求
什么时候我们需要使用localStorage呢？
举个栗子，当一个用户首次进入一个页面时，设置此页面中的语言为中文，那下一次当用户再次进入这个页面的时候，将直接显示中文。那用户首次选择的中文的这个数据需要保存在哪呢？很好的选择就是localStorage中。
使用
localStorage有提供一些API，我们可以使用这些API来保存，读取，清除数据。
- localStorage.setItem("key", "value"); //保存一个键值对
- localStorage.getItem("key"); //根据key值读取数据
- localStorage.removeItem("key"); //根据key值删除这个数据
- localStorage.clear(); //清除localStorage中的数据
- localStorage..hasOwnProperty('key'); //返回一个布尔值，检查localStorage中是否存在某个值
//localStorage保存数据的三种方式
window.localStorage['language'] = 'zh';
window.localStorage.language = 'zh'
window.localStorage.setItem('language', 'zh');
//相对应的可以用三种方式来读取localStorage
console.log(window.localStorage.language);
console.log(window.localStorage['language']);
console.log(window.localStorage.getItem('language'));
用一段简短的代码实现我们上面的栗。
//用一个下拉框来实现让用户选择语言的功能
<select>
<option value="zh"> 中文 </option>
<option value="en"> English </option>
</select>
$(function(){
let language = 'zh'; //默认是中文
let localStorage = window.localStorage;
function setLanguage(language) {
//设置页面语言代码
}
localStorage.hasOwnProperty('language') ? setLanguage(localStorage.language) : setLanguage(language);
$('select').on('change', function(){
localStorage.setItem('language', $('select').val());
});
})
扩展
localStorage经常用来保存页面中的默认设置，当然它的用处不止如此。在页面开发中，小白我曾经遇到这样一个问题，为提高用户体验，我们需要在发送请求后跳转页面。但当页面跳转后，原页面被销毁，其中的请求也会自然被取消掉。所以无法确定请求发送成功。这样的情况，我们就可以使用localStorage，将需要发送的数据保存在localStorage中，在跳转之后的页面来做发送请求的操作，来解决问题。
优化
在现在的网页开发中，我们经常会使用到localStorage，但是每一个属性我们都需要在其更改的时候都需要手动保存，这样是不是太麻烦了呢？作为前端小白的我没有这个能力，但是我优秀的老大写了这篇文章，告诉大家如何用一个简单的装饰器来代替你复杂的操作 —— 通过装饰器自动同步本地缓存
注意事项：
- localStorage遵循同源策略，不同的网站无法共用相同的localStorage。
- 目前localStorage中存储的值的类型都是string，如果需要使用其他数据类型，需要手动转换。
