html5中localStorage本地存储的简单使用


Posted in HTML / CSS onJune 16, 2017

我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。

1、localStorage.name="老王";      //第一种设置存储本地数据的方法localStorage

2、localStorage.setItem("color","red");   //第二种设置存储本地数据的方法

3、localStorage.removeItem("name"); //删除本地存储数据

4、localStorage.name

//获取本地数据
   localStorage.getItem("set")

//另一种获取本地数据的方法

5 localStorage.key(0) //获取前面保存数据的名称 括号中的数值和数组相同

6、localStorage.clear() //清除所有本地存储的数据

7、localStorage.setItem("set1","{'name':'小李','age':'1314'}") //保存为json格式,1、节省条数 2、提取方便

8、var price=localStorage.getItem("set1") // 获取保存的本地数据

obj=eval('('+price+')') //将json格式字符串转换为对象

alert(obj.age) //调用其中的值

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    localStorage.name="杜人龙";
    localStorage.name="小花"; //第一种设置本地数据的方法
    localStorage.setItem("set","小菊"); //第二种设置本地数据的方法
    localStorage.setItem("set1","{'name':'小李','age':'1314'}") //保存为json格式
    localStorage.removeItem("name"); //删除本地存储数据
    alert(localStorage.name) //获取本地数据
    alert(localStorage.getItem("set"))  //另一种获取本地数据的方法
    alert(localStorage.key(0)) //获取前面保存数据的名称 括号中的数值和数组相同
    var price=localStorage.getItem("set1")
    obj=eval('('+price+')')
    alert(obj.age)
    localStorage.clear()  //清楚本地所有数据
</script>
</body>
</html>

存储位置

html5中localStorage本地存储的简单使用

以上所述是小编给大家介绍的html5中localStorage本地存储的简单使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 #HTML / CSS
详解H5本地储存Web Storage
Jul 03 #HTML / CSS
H5仿微信界面教程(一)
Jul 05 #HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 #HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 #HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
You might like
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
JS实现吸顶特效
2020/01/08 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
详解python 降级到3.6终极解决方案
2020/02/06 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
个人简历自我评价
2014/01/06 职场文书
岗位竞聘书范文
2014/03/31 职场文书
信访工作经验交流材料
2014/05/23 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
如何写好闭幕词
2019/04/02 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS