位置:电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) 推荐学习资源
HTML5 简介
HTML5 Canvas教程
HTML5 基础标签
HTML5 表单属性和input详解
HTML5 高级部分
当前阅读教程:HTML5入门电子教程 > localStorage 对象
阅读(22555525)      收藏       赞(5685)      分享
上一篇: HTML5 Web 存储 下一篇: sessionStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

示例

小白教程网www.2d5.net

代码如下:

localStorage.sitename="HTML教程";

document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;

实例解析:

n  使用 key="sitename" value="菜鸟教程" 创建一个 localStorage /值对。

n  检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写:

// 存储

localStorage.sitename = "菜鸟教程";

// 查找

document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

n  保存数据:localStorage.setItem(key,value);

n  读取数据:localStorage.getItem(key);

n  删除单个数据:localStorage.removeItem(key);

n  删除所有数据:localStorage.clear();

n  得到某个索引的keylocalStorage.key(index);

提示: /值对通常以字符串存储,你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数。代码中的字符串值转换为数字类型,示例

小白教程网www.2d5.net

代码如下:

if (localStorage.clickcount)

{

    localStorage.clickcount=Number(localStorage.clickcount)+1;

}

else

{

    localStorage.clickcount=1;

}

document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " ";



上一篇: HTML5 Web 存储 下一篇: sessionStorage 对象
毕业设计网             广告联系QQ:45157718(微信同号)