`

html5 localStorage的使用

阅读更多

 

参考文章:

http://www.iteye.com/topic/983810

 

<script type="text/javascript">

if (window.localStorage) {

//alert(window.localStorage);

//alert('internet exploer is support local storage!');

} else {

//alert('internet exploer is no support local storage!');

}

 

if (window.sessionStorage) {

//alert(window.sessionStorage);

//alert('internet exploer is support session storage!');

} else {

//alert('internet exploer is no support session storage!');

}

//html5本地存储

//设置变量

window.localStorage.a = 'liuhui';

//alert(window.localStorage.a);

localStorage.b = 'liuhuib';

//alert(localStorage.b);

localStorage.a = 'liuhuia';

//alert(localStorage.a);

localStorage.setItem('c', 'liuhuic');

//alert(localStorage.c);

//alert(localStorage.getItem('c'));

localStorage.removeItem('c');//c value is null

//alert(localStorage.getItem('c'));

//localStorage.clear();//

//alert(localStorage.b);//note property b so value undefined

/*

我测试了一下。localStorage.removeItem(property)

和localStorage.clear();//清空所有

有一点差别:

removeItem 对象localStorage来说属性仍然存在,只是值为null

而使用clear(),则没有该属性了,alert(localStorage.property) 输出undefined

或者说改属性赋值undefined

*/

for ( var j = 0; j < localStorage.length; j++) {

alert(localStorage.key(j) + ' --- '

+ localStorage.getItem(localStorage.key(j)));

 

}

 

 

 

//localStorage example:

/*

* 需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,

所以读取的时候,需要自己进行类型的转换。

这也就是上一段代码中parseInt必须要使用的原因。

*/

 

//var myDiv = document.createElement('DIV');

var calculateNumberStr = localStorage.getItem('count');

if (calculateNumberStr) {//'0' experssion is true that used boolean runtime

localStorage.setItem('count', 0);

} else {

localStorage.setItem('count', parseInt(calculateNumberStr) + 1);

}

document.getElementById('a').innerHTML = '<font color=\'red\'>'

+ localStorage.getItem('count') + '</font>';

//alert(myDiv.innerHTML);

 

//document.body.appendChild(myDiv);

 

//note:chorme browers no support defer attribute so use myLocalStorage 函数

//chorme浏览器不支持defer=true属性

function myLocalStorgae() {

//var myDiv = document.createElement('DIV');

var calculateNumberStr = localStorage.getItem('count');

//alert(calculateNumberStr);

if (!calculateNumberStr) {//'0' experssion is true that used boolean runtime

localStorage.setItem('count', 0);

} else {

localStorage.setItem('count', parseInt(calculateNumberStr) + 1);

}

document.getElementById('a').innerHTML = '<font color="red">'

+ localStorage.getItem('count') + '</font>';

//alert(eleNode);

//alert(myDiv.innerHTML);

//document.body.appendChild(myDiv);

}

</script>

分享到:
评论

相关推荐

    HTML5 localStorage使用总结

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    cookie使用,localStorage使用

    这就是HTML5引入localStorage的原因。localStorage提供了比Cookie更大的存储空间(通常为5MB),并且数据不会随着每个HTTP请求发送到服务器,从而降低了网络负担。localStorage的操作相对简单: 1. 存储数据: ```...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...

    HTML5 LocalStorage 本地存储刷新值还在

    使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 localStorage.valueOf( )//获取全部值 localStorage.removeItem(key)//删除单个值,注意引号 ...

    HTML5 localStorage 页面数据同步demo

    HTML5 localStorage 页面数据同步demo。 演示方法,同时打开localstorage1.html, localstorage2.html, localstorage3.html,需用用http方式打开,修改任意一个后,点save或clear。 其他两个页面会同步更新。

    locstor, 用于 HTML5 localStorage的JavaScript helper 库.zip

    locstor, 用于 HTML5 localStorage的JavaScript helper 库 ## locstor.js 一个 localStorage helper 库支持所有现代浏览器和内容为什么是 locstor.js?API插件运行单元测试如何贡献问题/评论 ?让我们面对它,HTML5...

    H5打包成安卓app后,js的localstorage失效报错.pdf

    `localStorage`是HTML5引入的一种本地存储机制,允许Web应用在用户的浏览器中存储大量数据,相比于传统的Cookie,`localStorage`提供了更大的存储空间(通常为5MB),并且数据不会随着HTTP请求发送,从而降低了网络...

    LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统

    当用户添加、修改或删除学生信息时,可以使用`localStorage.setItem()`和`localStorage.getItem()`方法来存取数据,而`localStorage.removeItem()`和`localStorage.clear()`则用于删除和清空数据。 总结来说,这个...

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    这个"基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip"提供了一个经过优化的JavaScript组件,旨在使localStorage的使用更加方便和通用。 localStorage主要提供了两个方法:`setItem`和`...

    使用localStorage缓存js

    `localStorage` 是HTML5引入的一种本地存储机制,允许web应用在浏览器中存储大量数据,且这些数据不会在用户关闭浏览器后丢失。本篇文章将深入探讨如何使用 `localStorage` 来缓存JavaScript文件,从而提高页面加载...

    Html5 localStorage入门教程

    HTML5的localStorage是Web开发中的一个重要特性,它允许开发者在用户浏览器上持久地存储数据,这些数据不受浏览器会话的影响,即使用户关闭了浏览器或重新启动电脑,数据仍然存在。这个功能极大地增强了Web应用程序...

    android与html5的交互——数据库操作,UI操作,以及html5的localStorage、定位功能

    本篇将深入探讨Android与HTML5之间的交互,主要关注数据库操作、UI操作、HTML5的localStorage以及定位功能。 1. **数据库操作**: HTML5引入了Web SQL Database和IndexedDB作为离线存储解决方案,允许在浏览器端...

    webSql/LocalStorage

    WebSQL和LocalStorage是两种在浏览器端进行数据存储的技术,它们都是HTML5标准的一部分,为Web应用提供了离线存储的能力。 WebSQL,全称Web SQL Database,是一个基于SQLite的关系型数据库系统,它允许开发者在用户...

    HTML5中Localstorage的使用教程

    同时,对于跨域共享数据,可以使用HTML5的`Window.postMessage`方法配合Localstorage实现通信。 总的来说,Localstorage是HTML5为Web开发提供的强大工具,能够有效提升用户体验,但开发者应根据具体需求权衡其优点...

    基于html5的localstorage的本地存储数据库.zip

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库,这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

    使用jquery读取html5 localstorage的值的方法

    在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值, 下面给出的例子是使用jquery 在每次表单加载的时候,...

Global site tag (gtag.js) - Google Analytics