【localStorage的理解与使用】

1. 什么是localStorage？

localStorage是HTML5提供的一种在客户端存储数据的机制，可将数据存储在本地浏览器中，即使用户关闭了浏览器也不会丢失该数据。

2. localStorage可以用来做什么？

• 数据共享：可以实现不同页面之间共享数据，例如一个页面存储了某个数据，另一个页面可以通过localStorage来获取这个数据。
• 用户偏好设置：可以使用localStorage存储用户的偏好，例如语言偏好、主体选择，下次访问网站可以保留用户的个性化设置。
• 会话保持状态：localStorage可以用来存储客户端用户的会话状态，例如登录状态、购物车内容，这样即使用户关闭了浏览器，再次打开也可以回到之前的状态。
• 本地缓存：localStorage可以用来缓存数据，例如图片、脚本，这样可减少网络请求，提高页面加载速度。

注意：localStorage存储的数据是在客户端，不适合存储敏感信息，如密码。

3. localStorage常用方法

（1）存储数据，如下：key是自定义的数据键名，value是需要存储的实际值

localStorage.setItem(key, value);

例如：login.html中将用户名为"Nancy"用localStorage存储在浏览器中

localStorage.setItem('username', 'Nancy');

（2）获取数据，如下：key是之前设置的数据键名

var 变量名 = localStorage.getItem(key);

例如：在index.html获取login.html中存储在浏览器中的用户名

var name = localStorage.getItem('username');
console.log('在index.html中获取login.html存储在浏览器中的username=' + name);

（3）删除数据，其中key是要删除的数据键名

localStorage.removeItem(key);

例如：退出登录时，将login.html存储在浏览器的username删除

localStorage.removeItem('username');

4. 清空数据，用以清空浏览器存储的所有数据

localStorage.clear();

注意点：

1. localStorage存储的数据类型只能是字符串类型，如果要存储其他类型的数据，需要先转化为字符串类型，然后获取数据时，再将之转换为对应的类型

var obj = {name:'Nancy', age:18};
localStorage.setItem('user', JSON.stringify(obj));   //转换为字符串再存储

--------------------------------------------------------
var userStr = localStorage.getIem('user');
var user = JSON.parse(userStr);  //将字符串类型转换为对应的类型
console.log(user.name);
console.log(user.age);

2. localStorage存储的数据大小是有限制的，不同浏览器限制大小也不同，如果存储的数据查过了限制大小，会导致存储失败。