【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存储的数据大小是有限制的,不同浏览器限制大小也不同,如果存储的数据查过了限制大小,会导致存储失败。 

你可能感兴趣的:(edge浏览器,javascript)