<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<pre>

localStorage的使用：

    1.存储的内容大概20mb

    2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据

    3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除

    setItem(key,value):存储数据，以键值对的方式存储

    getItem(key):获取数据，通过指定名称的key获取对应的value值

    removeItem(key):删除数据，通过指定名称key删除对应的值

    clear():清空所有存储的内容</pre>

<br>

<input type="text" id="userName"><br>

<input type="button" value="设置数据" id="setData">

<input type="button" value="获取数据" id="getData">

<input type="button" value="删除数据" id="removeData">

<input type="button" value="清空数据" id="emptyData">

<script>

    document.querySelector("#setData").onclick=function(){

        var name=document.querySelector("#userName").value;

        /*使用localStorage存储数据*/

        window.localStorage.setItem("userName",name);

    }

    /*获取数据*/

    document.querySelector("#getData").onclick=function(){

        var name=window.localStorage.getItem("userName");

        alert(name);

    }

    /*清除数据*/

    document.querySelector("#removeData").onclick=function(){

        window.localStorage.removeItem("userName");

    }

    /* 清空数据 */

    document.querySelector("#emptyData").onclick=function () {

    window.localStorage.clear ();

    }

</script>

</body>

</html>

H5 数据存储localStorage的更多相关文章

  1. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

  2. H5 - 本地数据存储 - localStorage.setItem

  3. angularjs 本地数据存储LocalStorage

    1.定义服务 //=========本地存储数据服务============ app.factory('locals', ['$window', function ($window) { return ...

  4. Angular本地数据存储LocalStorage

    //本地存储数据===================================.factory('locals',['$window',function($window){ return{ / ...

  5. angular.js 本地数据存储LocalStorage

    定义工厂模式 factory  本地存储数据服务 app.factory('locals', ['$window', function ($window) { return { //存储单个属性 se ...

  6. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  7. 客户端相关知识学习（十一）之Android H5交互Webview实现localStorage数据存储

    前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...

  8. 前端数据存储方案集合（cookie localStorage等）以及详解 （二）

    前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...

  9. H5本地存储：sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

随机推荐

  1. JS的八大数据类型

    js中的数据类型,包括基本数据类型(Number,String,Boolean, Undefined,Null)和   复杂(引用)数据类型(Object,Array,Function) 基本数据类型 ...

  2. Swift 之数组与字典

    http://www.cocoachina.com/swift/20151230/14802.html 说到数组和字典,只要是编过程的小伙伴并不陌生.在Swift中的数组与字典也有着一些让人眼前一亮的 ...

  3. Codeforces 439C

    题目链接 比赛时间没能通过==, 只能说明自己代码写的太不严谨咯! 解题思想就是贪心 先判断无解的情况: 1. 奇数不够,因为偶数是无法凑成奇数的 2. 偶数不够,2个奇数可以凑成一个偶数 3. 在奇 ...

  4. 删除重复节点 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. Nginx教程(二) Nginx虚拟主机配置 （转）

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  6. More Effective C++: 04效率

    16:牢记80-20准则 80-20准则说的是大约20%的代码使用了80%的程序资源:大约20%的代码耗用了大约80%的运行时间:大约20%的代码使用了80%的内存:大约20%的代码执行80%的磁盘访 ...

  7. Pyhton 单行、多行注释方法

    一.python单行注释的符号 井号#常被用作单行注释符号,在代码中使用#时,它右边的任何数据都会被忽略,当做是注释.类似c++的// 二.批量.多行注释的符号 多行注释是用三引号: ”’ 注释内容 ...

  8. JAVA中this的三种用法的详解

    this关键字必须放在非静态方法里面 this关键字代表自身,在程序中主要的使用用途有以下几个方面: ? 使用this关键字引用成员变量 ? 使用this关键字在自身构造方法内部引用其它构造方法 ? ...

  9. Visual Studio中，无法嵌入互操作类型“……”，请改用适用的接口的解决方法

    解决方案:选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型”设置为False,问题轻松解决. 问题分析: 1.”嵌入互操作类型”中的嵌入就是引进.导入的意思,类似于c#中using,c中 ...

  10. 爬虫：Selenium + PhantomJS

    更:Selenium特征过多(language/UserAgent/navigator/en-US/plugins),以Selenium打开的浏览器处于自测模式,很容易被检测出来,解决方法可选: 用m ...