<!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. Sentinel 1.5.0 正式发布，引入 Reactive 支持

    近日,流控降级组件 Sentinel 的又一个里程碑版本 1.5.0 正式发布. 该版本引入 Reactive 的支持,并提供多项新特性与改进.从 1.5.0 版本开始,Sentinel 仅支持 JD ...

  2. mkdir、touch、rm和rmdir命令

    一.mkdir命令 mkdir命令用来创建目录.该命令创建由dirname命名的目录.如果在目录名的前面没有加任何路径名,则在当前目录下创建由dirname指定的目录:如果给出了一个已经存在的路径,将 ...

  3. 【JZOJ3887】【长郡NOIP2014模拟10.22】字符串查询

    haf 给定n个字符串和q个询问 每次询问在这n个字符串中,有多少个字符串同时满足 1. 字符串a是它的前缀 2. 字符串b是它的后缀 100%数据满足n,q≤50000,字符串长度丌超过100,任意 ...

  4. 【JZOJ4761】【NOIP2016提高A组模拟9.7】鼎纹

    题目描述 输入 输出 样例输入 2 3 4 4 2 1100 0110 1100 10 01 10 00 2 2 2 2 11 11 01 10 样例输出 YES NO 数据范围 解法 由于鼎纹中的第 ...

  5. 大数据技术之Hadoop入门

      第1章 大数据概论 1.1 大数据概念 大数据概念如图2-1 所示. 图2-1 大数据概念 1.2 大数据特点(4V) 大数据特点如图2-2,2-3,2-4,2-5所示 图2-2 大数据特点之大量 ...

  6. Directx11教程(53) D3D11管线(8) GS的调度执行

    原文:Directx11教程(53) D3D11管线(8) GS的调度执行        在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行 ...

  7. springboot thymeleaf【转】【补】

    thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...

  8. poj3261 后缀数组求重复k次可重叠的子串的最长长度

    Milk Patterns Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 13669   Accepted: 6041 Ca ...

  9. SharePoint开发中怎样使用Visual Studio给你的Web Part加入图标

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012025054/article/details/36051545 SharePoint开发中怎样 ...

  10. 生成主键ID,唯一键id,分布式ID生成器雪花算法代码实现

    工具类:  package com.ihrm.common.utils; import java.lang.management.ManagementFactory; import java.net. ...