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伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
模仿OSO的论坛(二)
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
nodejs多版本管理总结
2018/04/03 NodeJs
javascript显示动态时间的方法汇总
2018/07/06 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
关于python中导入文件到list的问题
2020/10/31 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
会计系中文个人求职信
2013/12/24 职场文书
公司培训心得体会
2014/01/03 职场文书
商场促销活动策划方案
2014/08/18 职场文书
党的生日演讲稿
2014/09/10 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年保送生自荐信
2015/03/24 职场文书
员工辞退通知书
2015/04/17 职场文书
2015年化验室工作总结
2015/04/23 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android