关于H5 storage 的一些注意事项以及用法

在我们使用H5 storage之前,先了解一下storage的介绍吧:

Storage模块管理应用本地数据存储,用于应用数据的保存和读取,应用本地数据localStorage,sessionStorage的区别在于数据的有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量的限制,通过plus.storage可获取应用本地数据管理对象

这里我们就说一下最常用的两个方法:

getItem(key);--根据key值获取应用存储的值,没有值返回null

setItem(key,value);--保存数据至应用存储中,没有值返回null

<html>
    <head>
    <meta charset="utf-8">
    <title>Storage Example</title>
    <script type="text/javascript">

document.addEventListener("plusready",plusReady,false);
// H5 plus事件处理
function plusReady()
{
  //这里填写plus的处理代码
}
// Get storage item value
function setStorage()
{
  plus.storage.setItem("name","博客园");//大家保存数据的时候,key键尽量小写,value尽量存储字符串
}
function getStorage()
{
  return plus.storage.getItem("test");//根据key的值来获取保存在应用存储中的数据
}
 </script>
 </head>
 <body>
  获取应用存储区中保存的键值对的个数
  <br/>
  <button onclick="alert(getStorage())">获得本地应用存储数据</button>
  <button onclick="setStorage()">保存数据至本地应用存储</button>
</body>
</html>

  

以上是一个很简单的小列子,那么下面就给大家说一说在使用过程中经常会遇到的一些问题:

1:document.addEventListener("plusready",plusReady,false);这一句话大家注意不要每次使用都添加一次监听,只需要在初始化的时候写一下就可以了(这里只针对单页面)

2:还有一些朋友,在使用的过程中,发现明明已经Ready过了,为什么使用的时候还是会报错:plus is ....不要着急,其实这个问题很简单,看一下你的编译器在真机运行的时候,你本地保存一次,app上面也跟着刷新一次,遇到这样的问题,大家把真机运行关闭,重新运行一次就可以啦

其实这个东西很简单的,当然你的对他有所了解才行,下面给大家一个官方的文档链接,也可以根据官方的内容来进行实战的哈

http://www.html5plus.org/doc/zh_cn/storage.html

时间: 2024-10-23 14:12:13

关于H5 storage 的一些注意事项以及用法的相关文章

H5项目常见问题及注意事项

Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width    设置viewport宽度,为一个正整数,或字符串'device-width' // h

h5前端项目常见问题汇总

原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scal

H5 项目常见问题汇总及解决方案

H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width    设置viewport宽度,为一个正整数,或字符串'devi

[转]H5项目常见问题汇总及解决方案

html { line-height: 1.6 } body { font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #f3f3f3; line-height: inherit } body.rich_media

html5 storage事件

HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html.你在其他里面点击播放或者添加的时候,你会发现 https://y.qq.com/portal/player.html 会实时的变化.当前我想,这个神奇啊, 当前想法是如下,可是怎么想都比较low啊. 1. 存入

H5移动端的一些坑、、、

H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串'device-

H5 常见问题汇总及解决方案

原文链接:http://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg H5 项目常见问题汇总及解决方案 -- 由钟平勇分享 转自 https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,

彻底搞懂Html5本地存储技术(一)

一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成主Domain污染 (4)cookies明文传输很不安全 2.UserData(只有IE支持) 3.其他非主流方案 二.H5相关的存储知识 1.本地存储WebStorage (localstorage & sessionstorage) 浏览器支持情况 (1)生命周期 localstorage永久存

多线程设计模式总结(二)

接上一篇<多线程设计模式总结(一)>,这篇博客再介绍5个多线程设计模式 7)Thread-Per-Message 实现某个方法时创建新线程去完成任务,而不是在本方法里完成任务,这样可提高响应性,因为有些任务比较耗时. 示例程序: 1 2 3 4 5 6 7 8 9 10 public class Host { private final Handler _handler=new Handler(); public void request(final int count, final char