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属性box-sizing使用指南
Dec 09 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
CSS基础详解
Oct 16 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
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP中cookie知识点学习
2018/05/06 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
js控制input输入字符解析
2013/12/27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
C和C++经典笔试题附答案解析
2014/08/18 面试题
保险公司客户经理岗位职责
2015/04/09 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP