<!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. Ubuntu卸载通过apt-get命令安装的软件

    卸载一个已安装的软件包(删除配置文件): apt-get --purge remove packagename

  2. C++之自定义key类型，重载操作符

    #include <map>#include <string>using namespace std;class MyString{ public:MyString(){m_s ...

  3. PHP学习（字符串操作）

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ".单引号和双引号到底有啥区别呢?  PHP允许我们在双引号串中直接包含字串变量.而单引号串中的内容总被认 ...

  4. 【JZOJ4920】【NOIP2017提高组模拟12.10】降雷皇

    题目描述 降雷皇哈蒙很喜欢雷电,他想找到神奇的电光. 哈蒙有n条导线排成一排,每条导线有一个电阻值,神奇的电光只能从一根导线传到电阻比它大的上面,而且必须从左边向右传导,当然导线不必是连续的. 哈蒙想 ...

  5. Java注解初步了解 2016-07-24 22:20 240人阅读 评论(21) 收藏

    Java注解又称Java标注,是Java语言5.0版本开始支持加入源代码的特殊语法元数据. Java语言中的类.方法.变量.参数和包等都可以被标注.Java标注和Javadoc不同,标注有自反性.在编 ...

  6. 【NS2】在linux下安装低版本GGC

    1.下载安装包,cd到文件所在目录 sudo dpkg -i gcc41-compat-4.1.2-ubuntu1210_i386.deb g++41-compat-4.1.2_i386.deb 2. ...

  7. Java练习 SDUT-1294_选票统计

    选票统计 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 某校学生会主席由全校学生投票选举产生,共有m名候选人报名参选, ...

  8. H5页面IOS中键盘弹出导致点击错位的问题

    IOS在点击输入框弹出键盘  键盘回缩 后 定位没有相应改变  还有  textarea 也会弹出键盘 $("input").blur(function() { console.l ...

  9. 基于 springMVC 的 RESTful HTTP API 实践（服务端）

    理解 REST REST(Representational State Transfer),中文翻译叫"表述性状态转移".是 Roy Thomas Fielding 在他2000年 ...

  10. 仿IOS效果-带弹簧动画的ListView

    背景介绍 最近项目打算做一个界面,类似于dayone首页的界面效果,dayone 是一款付费应用,目前只有IOS端.作为一个资深懒惰的程序员,奉行的宗旨是绝对不重复造一个轮子.于是乎,去网上找一大堆开 ...