一、H5本地存储的局限性
1. 存储空间有限：H5页面通常只能使用Web Storage API，如localStorage和sessionStorage，其存储空间有限，通常为5MB左右。
2. 安全性较低：Web Storage API的存储内容可以被其他网站访问，安全性较低。
3. 生命周期限制：sessionStorage的存储内容在页面关闭后自动消失，而localStorage的存储内容则永久存在。
二、H5封装调用本地存储的方法
1. 使用本地数据库
（1）SQLite：SQLite是一款轻量级的数据库，可以嵌入到H5页面中。 通过封装SQLite API，实现数据的增删改查操作。
（2）IndexedDB：IndexedDB是Web标准的一部分，提供了一种低级API，用于客户端存储大量结构化数据。
2. 使用第三方存储库
（1）WeixinJSBridge：微信小程序提供WeixinJSBridge，可以调用微信本地存储API。
（2）H5+：H5+是一款基于Webview的跨平台框架，提供丰富的API，包括本地存储API。
3. 使用本地缓存
（1）使用localStorage：将数据存储在localStorage中，通过封装方法实现数据的增删改查。
（2）使用sessionStorage：将数据存储在sessionStorage中，实现页面关闭后数据消失的效果。
三、封装调用本地存储的示例
以下是一个使用localStorage封装调用本地存储的示例：
```javascript
// 封装localStorage操作
var localStorageUtil = {
setItem: function(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
getItem: function(key) {
var value = localStorage.getItem(key);
return value ? JSON.parse(value) : null;
},
removeItem: function(key) {
localStorage.removeItem(key);
},
clear: function() {
localStorage.clear();
}
};
// 使用封装的localStorage操作
localStorageUtil.setItem('username', '张三');
console.log(localStorageUtil.getItem('username')); // 输出：张三
localStorageUtil.removeItem('username');
console.log(localStorageUtil.getItem('username')); // 输出：null
```
四、注意事项
1. 数据加密：为提高安全性，对存储在本地存储中的数据进行加密处理。
2. 异步处理：在调用本地存储时，注意异步处理，避免阻塞页面渲染。
3. 数据同步：在多页面或多设备环境下，考虑数据同步问题。
4. 清理存储：定期清理本地存储中的无用数据，释放存储空间。
总之，通过封装和调用本地存储，可以提高H5页面的用户体验和功能实现。 在实际开发中，根据项目需求和场景选择合适的本地存储方案，并注意安全性、异步处理和数据同步等问题。