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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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学习之PHP变量
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
党员公开承诺践诺书
2014/03/25 职场文书
公司运动会策划方案
2014/05/25 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
婚庆司仪开场白
2015/05/29 职场文书
实施意见格式范本
2015/06/05 职场文书
信用卡工资证明范本
2015/06/19 职场文书
公司开业致辞
2015/07/29 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python