欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-01 15:04:46
我们在做页面时会用到本地存储的时候，今天说说localStorage本地存储。感兴趣的朋友一起学习吧... 17-06-16...

我们在做页面时会用到本地存储的时候，今天说说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本地存储的简单使用，希望对大家有所帮助

上一篇： 详解H5本地储存Web Storage

下一篇： 基于HTML5 Canvas 实现弹出框效果

推荐阅读