• HTML5 JS API 本地存储LocalStorage基本操作


    LocalStorage:
    使用方法与SessionStorage如出一辙,如下代码所示:
    此对象主要有两个方法:
    保存数据:localStorage.setItem(Key, value);
    读取数据:localStorage.getItem(Key);
    Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
    Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

    使用方法:
    保存数据:localStorage.setItem("website", "W3Cfuns.com");
    读取数据:localStorage.getItem("website");


    案例如下:

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gb2312">
            <title>HTML5每日一练之JS API-本地存储LocalStorage | 前端开发网(W3Cfuns.com)!</title>
            <script type="text/javascript">
                    window.onload = function()
                    {
                            alert("当你关闭此页面或者关闭浏览器的时候,localStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,可以取到数据。")
                            
                            //首先获得body中的3个input元素
                            var msg = document.getElementById("msg");
                            var getData = document.getElementById("getData");
                            var setData = document.getElementById("setData");
                            
                            setData.onclick = function()//存入数据
                            {
                                    if(msg.value)
                                    {
                                            localStorage.setItem("data", msg.value);
                                            alert("信息已保存到data字段中");
                                    }
                                    else
                                    {
                                            alert("信息不能为空");
                                    }
                            }
                            
                            getData.onclick = function()//获取数据
                            {
                                    var msg = localStorage.getItem("data");
                                    if(msg)
                                    {
                                            alert("data字段中的值为:" + msg);
                                    }
                                    else
                                    {
                                            alert("data字段无值!");
                                    }
                            }
                    }
            </script>
        </head>
        
        <body>
                <input id="msg" type="text"/>
            <input id="setData" type="button" value="保存数据"/>
            <input id="getData" type="button" value="获取数据"/>
        </body>
    </html>

    尊重每一名RD成果。。原文链接:http://www.w3cfuns.com/article-5592538-1-1.html

  • 相关阅读:
    到底有多少种智能指针(smart pointer)
    QSettings提供了非常方便的注册表读写
    阿里腾讯亿元级投资版图:阿里爱买超市,腾讯娱乐至上(恐怖)
    gcc安装教程(学习Linux编程只需安装cygwin)
    苹果抛弃的芯片公司Imagination被中资49亿溢价收购
    NET Core2
    HelloWorld RabbitMQ
    redis 集群
    kafka
    Impala简介PB级大数据实时查询分析引擎
  • 原文地址:https://www.cnblogs.com/Mwsoft/p/4842253.html
Copyright © 2020-2023  润新知