html5中localStorage本地存储的简单使用

所属分类: 网页制作 / html5 阅读数: 325
收藏 0 赞 0 分享

我们在做页面时会用到本地存储的时候,今天说说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 Canvas锯齿图代码实例

这篇文章主要介绍了HTML5 Canvas锯齿图代码实例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5图片上传预览示例分享

这篇文章主要介绍了html5图片上传预览示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5的canvas元素使用方法介绍(画矩形、画折线、圆形)

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
收藏 0 赞 0 分享

使用html5制作loading图的示例

这篇文章主要介绍了使用html5制作loading图的示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5读取本地文件示例代码

这篇文章主要介绍了html5读取本地文件的具体实现,html结构样式、Css样式及js代码如下,需要的朋友可以看看哦
收藏 0 赞 0 分享

html5菜单折纸效果

这篇文章主要介绍了html5菜单折纸效果,类似猎豹浏览器安装时的用户须知效果,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5添加鼠标悬浮音响效果不使用FLASH

使用HTML5+jQuery添加鼠标悬浮音响效果,兼容Firefox 3.5+, Chrome 3+等等,使用html5的audio元素,随机播放一个mp3音效,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5中的Scoped属性使用实例

HTML5的变革给我们带来了大量非常有用的新属性,比如placeholder, download, hidden,等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力
收藏 0 赞 0 分享

HTML5的hidden属性兼容老浏览器的方法

HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等
收藏 0 赞 0 分享

html5基础标签(html5视频标签 html5新标签用法)

html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧
收藏 0 赞 0 分享
查看更多