HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-05-15 07:13:26

HTML5 localStorage 数据存储实例

一、使用 localStorage 存储字符串、数组、对象

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。使用 localStorage 来存储数据，只能存储字符串数据，如果想要存储其他数据：数组、对象、数字等，我们可以按自己的需要进行格式转换。

localStorage 其实就是一个对象，我们不仅可以使用它其中的方法：setItem(key,value); 来进行数据存储，我们也可以直接以给他添加属性的方式来存取数据：localStorage.name = "jesen";

使用 localStorage 的 setItem方法（或者以添加属性的方式）来存储数据
使用 localStorage 的 getItem方法（或者以读取属性的方式）来取出数据

<div id="result"></div>
<script type="text/javascript">
    // 浏览器兼容性检查
    if (typeof(Storage) !== "undefined") {

        // 存储字符串
        localStorage.setItem("name", "jesen");

        //存储数组
        //var array = [1,2,3,4,5,6];
        //localStorage.setItem("array", JSON.stringify(array));

        //存储对象
        //var person = {"name":"jesen","age":20};
        //localStorage.setItem("person", JSON.stringify(person));

        // 显示存储的数据
        document.getElementById("result").innerHTML = localStorage.getItem("name");
        //document.getElementById("result").innerHTML = JSON.parse(localStorage.getItem("array")).length;
        //document.getElementById("result").innerHTML = JSON.parse(localStorage.getItem("person")).name;

    } else {
        document.getElementById("result").innerHTML = "您的浏览器不支持 Web Storage ...";
    }
</script>

执行一下

二、使用 localStorage 实现页面访问次数的记录

<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
<script type="text/javascript">
    if (localStorage.pagecount)  {
        localStorage.pagecount=Number(localStorage.pagecount) +1;
    } else {
        localStorage.pagecount=1;
    }
    document.write("访问次数: " + localStorage.pagecount + " 次");
</script>

执行一下