阅读量:0
HTML5的本地存储API为开发者提供了一种方便的方法，在用户的浏览器中保存和检索数据。
在HTML5中，本地存储的全新体验主要通过Web Storage API实现，它提供了一种更为高效、安全且跨平台的数据存储解决方案，以下是具体介绍：
1、为什么要存数据到客户端
能保存程序的状态：用户关闭浏览器再打开后能知道他工作到哪了。
能缓存数据：很多不会变化的数据根本没必要每次都从服务端获取。
能保存用户的喜好：这种数据通常不需要存在服务端。
2、以前的做法
HTTP cookie：最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
IE userData：允许每个页面最多存储64K数据，每个站点最多640K数据，但它不是Web标准的一部分。
Flash cookie：默认允许每个站点存储不超过100K的数据。
Google Gears：内置了一个基于SQLite的嵌入式 SQL数据库，但Google自己都已经不用它了。
3、HTML5中的全新体验
存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
不会发送到服务器：Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
4、Web Storage分类
sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
5、检查是否支持Web Storage
第一种方式：通过检查Storage对象是否存在来检查浏览器是否支持Web Storage。
第二种方式：分别检查各自的对象，例如检查localStorage是否支持。
HTML5的本地存储API为Web开发者提供了更强大、更灵活的数据管理工具，极大地提升了用户体验，减少了服务器负担，尤其是在离线应用和渐进式Web应用（PWA）中，本地存储发挥着至关重要的作用。
突袭HTML5之Javascript API扩展3—本地存储全新体验
背景介绍
随着Web应用的日益复杂，用户数据的存储和检索变得尤为重要，HTML5引入了新的本地存储API，使得Web应用能够在用户设备上持久化存储数据，而无需依赖服务器，这些API包括localStorage和sessionStorage。
localStorage
localStorage是Web存储API的核心，它允许Web应用在用户的浏览器中存储键值对数据，这些数据可以在用户的多个会话中访问，即使关闭浏览器重新打开，数据依然存在。
特点：
数据存储在本地计算机上，不会随着浏览器会话结束而消失。
数据存储在键值对形式中，键是字符串，值可以是字符串或对象（需要转换为字符串）。
使用方法：
// 设置数据 localStorage.setItem('key', 'value'); // 获取数据 var value = localStorage.getItem('key'); // 删除数据 localStorage.removeItem('key'); // 清除所有数据 localStorage.clear();sessionStorage
sessionStorage与localStorage类似，但它的数据存储仅在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据会被自动删除。
特点：
数据存储在会话中，即用户打开浏览器窗口后到关闭浏览器窗口前。
使用方法与localStorage相同。
存储限制
localStorage和sessionStorage的存储空间大小通常限制在5MB左右，但具体大小取决于浏览器的实现。
超过存储限制时，浏览器可能会删除旧数据。
安全性
本地存储的数据可以被任何访问同一域名的脚本访问，因此需要谨慎使用。
可以通过验证请求来源或使用HTTPS来提高安全性。
应用场景
用户偏好设置：存储用户界面设置，如字体大小、颜色主题等。
购物车：在用户未完成购买流程时保存购物车内容。
访问统计：记录用户访问次数和最后访问时间。
游戏进度：保存游戏进度和得分。
HTML5的本地存储API为Web应用提供了强大的数据存储功能，使得应用能够在用户设备上持久化存储数据，提高了用户体验和应用的灵活性，合理利用这些API，可以开发出更加丰富和强大的Web应用。
