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动画效果之animation的常用样式
Mar 09 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php数据库备份还原类分享
2014/03/20 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
浅析Git版本控制器使用
2017/12/10 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python不同系统中打开方法
2020/06/23 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
社区活动邀请函范文
2014/01/29 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
太行山上观后感
2015/06/05 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
windows系统安装配置nginx环境
2022/06/28 Servers