html5本地存储Web Storage

H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL

Web Storage

永久性的本地存储（localStorage）

一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<p id='msg'></p><!-- 用来输出 获取的数据 -->
<input type="text" id='input'><!-- 输入数据 -->
<button id='set-data' onclick='setData("input")'>保存数据</button>
<button id='get-data' onclick='getData("msg")'>读取数据</button>

<script>
    //获取元素
    function $(id){return document.getElementById(id)}
    
    //存储数据
    function setData(id){
        var el = $(id);//获取表单元素
        var str = el.value;//获取数据
        //存储数据 key value
        localStorage.setItem('anan',str);
    }

    //获取数据
    function getData(id){
        var el = $(id);//获取需要输出的元素
        var msg = localStorage.getItem('anan');//通过key，读取数据
        el.innerHTML = msg;//输出显示数据
    }
</script>

会话级别的本地存储（sessionStorage）

sessionStorage在会话期内有效，数据在浏览器关闭后自动删除；

<p id='msg'></p><!-- 用来输出 获取的数据 -->
<input type="text" id='input'><!-- 输入数据 -->
<button id='set-data' onclick='setData("input")'>保存数据</button>
<button id='get-data' onclick='getData("msg")'>读取数据</button>

<script>
    //获取元素
    function $(id){return document.getElementById(id)}
    
    //存储数据
    function setData(id){
        var el = $(id);//获取表单元素
        var str = el.value;//获取数据
        //存储数据 key value
        sessionStorage.setItem('anan',str);
    }

    //获取数据
    function getData(id){
        var el = $(id);//获取需要输出的元素
        var msg = sessionStorage.getItem('anan');//读取数据
        el.innerHTML = msg;//输出显示数据
    }
</script>

上一篇：vue计算属性

下一篇：less预编译语言