<!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. Python datetime对象的方法

  2. NOIP模拟 7.05

    Problem 1 双色球(ball.cpp/c/pas) [题目描述] 机房来了新一届的学弟学妹,邪恶的chenzeyu97发现一位学弟与他同名,于是他当起了善良的学长233 “来来来,学弟,我考你 ...

  3. 外贸电子商务网站之Prestashop 设置网站基本信息

    顶部banner图,首页各尺寸banner图.社交分享.物流支持.支付方式提醒等等设置 示例版本:1.6.1.11

  4. 【水滴石穿】rn_antd_dva_reactnavigation

    这个项目好像就是记录了一个数据的流向,大体思想好像是这个 项目地址:https://github.com/Yangzhuren/rn_antd_dva_reactnavigation 先看效果 第一个 ...

  5. malloc: *** error for object 0x10a291df8: pointer being freed was not allocated *** set a breakpoint in malloc_error_break to debug

    malloc_error_break错误: .You'll find out what the object is when you break in the debugger. Just look ...

  6. jQuery自动过滤单词插件

    在线演示 本地下载

  7. 洛谷 P1447 [NOI2010]能量采集 （莫比乌斯反演）

    题意:问题可以转化成求$\sum_{i=1}^{n}\sum_{j=1}^{m}(2*gcd(i,j)-1)$ 将2和-1提出来可以得到:$2*\sum_{i=1}^{n}\sum_{j=1}^{m} ...

  8. 序列化方案选型对比 - JSON/ProtocolBuffer/FlatBuffer/DIMBIN

    4千字长文预警!! 背景 JSON/XML不好吗? 好,再没有一种序列化方案能像JSON和XML一样流行,自由.方便,拥有强大的表达力和跨平台能力.是通用数据传输格式的默认首选.不过随着数据量的增加和 ...

  9. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  10. 【NS2】ubuntu安装和同时使用不同版本的ns2（转载）

    有时候我们可能会遇到要同时安装两个ns版本的问题,比如我研究wimax/802.16,因为协议太复杂,用的是长庚大学和nist的wimax补丁.长庚大学的wimax补丁是在ns2.29下开发的,nis ...