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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
详解CSS故障艺术
May 25 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python实现比较文件内容异同
2018/06/22 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
django实现用户注册实例讲解
2019/10/30 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
小学清明节活动方案
2014/03/08 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
大连导游词
2015/02/12 职场文书
入党自荐书范文
2015/03/05 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
python tkinter实现定时关机
2021/04/21 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS