`

html5本地存储 localStorage

 
阅读更多
<!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>
分享到:
评论

相关推荐

    HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 HTML5 本地存储是指在客户端存储数据的一种机制,通过使用 localStorage 对象,可以将数据存储在客户端,实现本地存储。这种机制可以代替传统的 Cookie Mechanism,提供了更大的存储...

    JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    在本文中,我们将深入探讨如何使用JavaScript(JS)与HTML5的本地存储机制Localstorage来实现用户注册和登录的功能,并进行基本的验证。Localstorage是Web应用存储数据的一种方法,它允许开发者在浏览器中持久化地...

    HTML5 本地存储 LocalStorage详解

    HTML5的本地存储机制,尤其是LocalStorage,是现代Web开发中不可或缺的一部分,它允许开发者在用户的浏览器上持久化地存储数据,而无需借助于Cookie或Flash等传统方式。LocalStorage的引入,解决了早期存储技术如...

    html 5 localStorage本地存储

    "HTML5 localStorage 本地存储" HTML5 中的 localStorage 是一种本地存储机制,可以将数据存储在客户端的浏览器中,提供了一个简单的方式来存储和检索数据。localStorage 的出现解决了以往 Cookies、UserData、...

    HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...

    html5本地存储 localStorage操作使用详解

    本文主要探讨了HTML5中的两种本地存储形式——`localStorage`和`sessionStorage`,以及它们的用途、限制和API。 1. HTML5的几种存储形式: - **本地存储(localStorage 和 sessionStorage)**:两者都是Web ...

    HTML5 LocalStorage 本地存储刷新值还在

    1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...

    本地存储localStorage用法详解

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    HTML5实现的本地缓存localstorage登录效果实例代码.zip

    HTML5是现代网页开发的关键技术,它引入了许多增强功能,其中本地存储机制是其中之一。Local Storage是HTML5中用于在用户浏览器中持久化存储数据的一种方法,它允许开发者在不借助Cookie的情况下,存储大量数据,...

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    HTML5的localStorage是Web应用程序本地存储数据的一种强大方式,它允许开发者在用户的浏览器上持久化地存储关键数据,而无需依赖传统的Cookie或者复杂的HTTP请求。这个"基于html5 localStorage本地存储的一个简易...

    store:本地存储实现,优先本地存储localStorage,如果浏览器不支持,优雅降级为cookie

    首先,`localStorage`是HTML5引入的一种本地存储机制,它允许Web应用在用户的浏览器上存储大量数据(通常高达5MB),并且这些数据不会在浏览器会话结束后消失。`localStorage`提供了一个简单的键值对存储接口,...

    原生html5,js利用localStorage写的历史输入预选(仿百度)

    原生html5,js利用localStorage写的历史输入预选(仿百度)

    基于html5的localstorage的本地存储数据库.zip

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库,这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

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

    HTML5的localStorage是Web应用程序用来在用户浏览器上持久存储数据的一种机制。相比于传统的Cookie,localStorage提供了更大的存储空间(通常为5MB),并且不会随着HTTP请求发送到服务器,从而减少了网络流量,提高...

Global site tag (gtag.js) - Google Analytics