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

HTML5 JS API 本地存储LocalStorage基本操作的更多相关文章

  1. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  2. HTML5本地存储 localStorage操作使用详解

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  3. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  4. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  5. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  6. Cocos本地存储LocalStorage

    HTML5 LocalStorage 本地存储 //存档 var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSav ...

  7. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  8. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

  9. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

随机推荐

  1. mysql配置优化测试

    http://bjlfp.blog.163.com/blog/static/77368461201211695924524/ 感觉真不错啊.观察几天看看

  2. [转]Excel生成批量SQL语句，处理大量数据的好办法

    当有大量重复体力工作写入或修改数据到数据库中时,可以 第一,将Excel数据整理好了之后,通过SQL的导入功能直接导进数据库,但是得保证数据库字段和Excel的字段一致. 第二,通过Excel来生成对 ...

  3. 【原】Oracle查询指定表里的触发器

    select * from all_triggers WHERE table_name='表名'

  4. js文件内部导入引用js文件方法

    function include(path){      var a=document.createElement("script");     a.type = "te ...

  5. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  6. MySQL查询LIKE如何匹配下划线 通配符转义

    MySQL查询时使用LIKE匹配下划线,您会发现连查询“%A_B%”时会出现“%A B%”和“%AB%”也查询出来了,这是因为下划线也被当作特殊字符,做了任意匹配转换了,所以,要想匹配下划线,那么就需 ...

  7. [Linux]学习笔记（1）

    说到Linux就不得不提UNIX,因为Linux是从UNIX系统发展来的,两系统极为相似,可以在UNIX操作系统上使用的功能都可以在Linux上使用,只可能有少许的差异: UNIX系统中所有的东西都是 ...

  8. $.ligerDialog 操作

    //关闭 $.ligerDialog.open 打开的弹窗 frameElement.dialog.close(); //关闭父窗口 parent.$.ligerDialog.close(); //关 ...

  9. opencv学习笔记（01）——操作图像的像素

    #include <opencv2\core\core.hpp> #include <opencv2\highgui\highgui.hpp> #include <ope ...

  10. ios App 打包

    ios 版本的 App 打包两种方式: 1. 命令行 xcodebuild exportArchive -exportFormat ipa 2. 通过 xcode Product -> Arch ...