zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【Silverlight】汉诺塔游戏,带AI
    Farseer Physics Engine
    解决SilverLight的图片裁剪问题
    【C#】三维立体验证码 (3DCaptcha)
    又一个“众所周知”的DAL层设计BUG
    【C#】性别类
    36进制条码序列号生成器 [更新]
    理想的软件设计标准
    表驱动法概念到实战(一) 原理及基本运用
    Sudoku solver
  • 原文地址:https://www.cnblogs.com/Mwsoft/p/4842253.html
Copyright © 2011-2022 走看看