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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 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+memcache实现消息队列案例分享
2014/05/21 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
详解js闭包
2014/09/02 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
js实现随机点名
2021/01/19 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python实现UDP协议下的文件传输
2020/03/20 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
关于安全的标语
2014/06/10 职场文书
校园安全广播稿范文
2014/09/25 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
利用python做表格数据处理
2021/04/13 Python
pycharm代码删除恢复的方法
2021/06/26 Python