1. HTML 5本地存储简介
HTML5本地存储是Web存储API规范的一部分，它是JavaScript的应用程序接口，可以让网页将数据存储在客户端，而不必每次都从服务器请求数据。HTML5本地存储包括两种不同的存储机制：Local Storage和Session Storage。
1.1 Local Storage
Local Storage用于持久性数据的存储，存储的数据不会过期，并且可以在不同的浏览器窗口、标签页或浏览器会话之间共享。容量通常在5MB-10MB之间。
1.2 Session Storage
Session Storage用于临时性数据的存储，在用户关闭浏览器窗口后，存储的数据会被清除。Session Storage也可以在不同的浏览器窗口、标签页或浏览器会话之间共享，容量通常也在5MB-10MB之间。
2. HTML 5本地存储子域的大小限制
HTML5本地存储的大小限制是由浏览器厂商决定的，不同浏览器厂商的大小限制也不一样。以Chrome浏览器为例，Local Storage和Session Storage的大小限制均为2.5MB~5MB，但是如果多个子域使用同一localStorage对象，它们共享同一个存储空间。
由于浏览器的安全策略，跨域访问会受到一定限制。比如，如果页面来自于a.com域，那么只有在a.com下创建的子域才能与父域（即a.com）共享LocalStorage。如果页面来自b.com域，那么只有在b.com下创建的子域才能与父域（即b.com）共享LocalStorage，不同域之间的LocalStorage是无法共享的。
需要注意的是，在HTML5之前的Web存储方案（cookie）通常有4KB到20KB的大小限制，而HTML5本地存储则可以提供更大的存储空间，使得Web应用程序能够在客户端存储更多的数据，提高了应用程序的性能和效率。
3. 本地存储的应用场景
HTML5本地存储适用于许多Web应用程序场景，包括：
3.1 数据缓存
网站常常需要从服务器获取数据，而这些数据却变化不大，如静态资源（JS、CSS、图片等）和一些少量的动态数据。可以通过本地存储将这些数据缓存到本地，在下次访问时直接从本地获取数据，减少对服务器的请求次数，提高页面的加载速度。
3.2 离线Web应用程序
HTML5本地存储也可以用于开发离线Web应用程序。通过将应用程序所需的各种资源（HTML、CSS、JS、图片等）缓存到本地存储中，即使在没有网络连接的情况下，用户也能够访问并使用应用程序。当用户再次连接到网络时，缓存的数据会被同步到服务器。
3.3 记住用户偏好设置
HTML5本地存储还可以用于保存用户的偏好设置，例如语言偏好、主题偏好等，这样，在用户下次访问时，可以自动加载用户的偏好设置，提高用户体验。
4. HTML5本地存储的安全风险
HTML5本地存储虽然为Web应用程序提供了许多好处，但也存在一些安全风险。由于存储在本地存储中的数据可以在任意时间、任意地点被访问，并且存储的数据不会过期，如果不加以限制，会存在泄露用户隐私的风险。
在设计Web应用程序时，需要采取一些措施来保护用户数据的安全：
4.1 加密数据
通过加密存储在本地存储中的数据，可以提高数据的安全性，避免敏感数据的泄露。加密存储的操作可以使用现代的Web加密技术，例如AES（Advanced Encryption Standard）。
4.2 生命周期
将Local Storage和Session Storage的生命周期限制在合理的范围内，例如一小时、一天或一周等，可以避免数据过期和泄露的风险。
4.3 内容审核和数据过滤
在存储数据之前，需要对数据进行审核和过滤，避免存储敏感数据和有害数据，例如不良图片、恶意代码等。
5. 总结
HTML5本地存储是Web应用程序中的重要组成部分，可以提高应用程序的性能和效率，适用于许多Web应用程序场景。但是，本地存储也存在一些安全风险，需要在设计和开发Web应用程序时采取措施来保护用户数据的安全和隐私。
对于HTML5本地存储子域的大小限制，不同浏览器厂商有不同的限制，以Chrome浏览器为例，Local Storage和Session Storage的大小限制均为2.5MB~5MB，但是如果多个子域使用同一localStorage对象，它们共享同一个存储空间。
<script>
let value = 'abc';
localStorage.setItem('key', value);
</script>