面试题：JavaScript中如何在Web编程里设置简单的本地缓存

Question

在JavaScript的Web编程场景下，阐述如何使用localStorage设置一个简单的缓存，例如缓存用户登录信息，并且说明这种缓存方式的优缺点。

Answer 1

使用localStorage设置简单缓存（以缓存用户登录信息为例）

1. 设置缓存

   // 假设用户登录信息是一个对象
   const userLoginInfo = {
       username: 'testUser',
       userId: 123,
       token: 'abcdef123456'
   };
   // 使用JSON.stringify将对象转换为字符串存储
   localStorage.setItem('userLoginCache', JSON.stringify(userLoginInfo));
   

2. 获取缓存

   const cachedUserLoginInfo = localStorage.getItem('userLoginCache');
   if (cachedUserLoginInfo) {
       const parsedUserLoginInfo = JSON.parse(cachedUserLoginInfo);
       console.log(parsedUserLoginInfo);
   }
   

优点

1. 持久性：数据存储在用户本地浏览器，关闭浏览器或刷新页面数据不会丢失，除非手动清除或代码删除。这对于保持用户登录状态等场景很有用，用户下次访问网站时可以直接从缓存中读取登录信息，无需再次登录。
2. 简单易用：localStorage提供了简单的API，通过setItem和getItem方法就可以方便地进行数据的存储和读取，不需要复杂的配置和额外的库。
3. 容量相对较大：一般来说，每个域名下的localStorage可以存储大约5MB的数据，相比cookie（一般4KB左右），能存储更多的数据。

缺点

1. 安全性问题：localStorage存储的数据是明文存储在用户本地浏览器的，任何可以访问该浏览器的人都有可能获取到这些数据，存在安全风险。例如，如果用户在公共电脑上登录网站且使用了localStorage缓存登录信息，其他人就有可能获取到这些信息。
2. 跨域限制：localStorage遵循同源策略，不同源的页面无法共享相同的localStorage数据，这在一些需要跨域共享数据的复杂场景下有局限性。
3. 数据类型单一：localStorage只能存储字符串类型的数据，对于对象、数组等复杂数据类型，需要先使用JSON.stringify进行转换，读取时再使用JSON.parse还原，增加了数据处理的复杂度。
4. 不会自动过期：localStorage中的数据除非手动删除，否则会一直存在，这可能导致数据占用空间越来越大，并且对于有时效性的数据（如短期有效的登录信息），需要额外编写代码来管理过期时间。