html在使用的时候，例如在input框里面，用户输入信息的时候，一点提交信息就开始向后天交互

但是一刷新或者用户再打开一个新的网页又得重新输入，这就牵扯到本地存储的问题

LocalStorage，是基于cookie来生成的，并且是永久保留本地的，除非删除

请看下面的例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="box">

    <input type="text" name="user" id="user">

    <input type="button" value="提交" id="submit">

</div>

<div class="content">

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

【位置1】

【位置2】

</script>

</body>

</html>

位置1的代码：判断是否有用户之前输入的key，有就保存下来，只保留最近的一条

    $(function () {

        if (localStorage.getItem('user')) {

            var user = localStorage.getItem('user');

            $('<p></p>').appendTo('.content').text(user);

        }

位置2的代码：点提交按钮后，将用户的信息设置为key并保存到本地

        $('#submit').click(function () {

            var user = $('#user').val();

            console.log(user);

            $('<p></p>').appendTo('.content').text(user);

            $('#user').val(""); //清空

            localStorage.setItem('user',user); //设置为key

        })

    })

下面是效果图

html5本地存储技术 localstorage的更多相关文章

  1. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  2. html5本地存储（localStorage）使用介绍

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

  3. 彻底搞懂Html5本地存储技术（一）

    一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成 ...

  4. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  5. HTML5本地存储之localStorage

    存入本地中:localStorage.setItem('Code',‘10001’) 获取:localStorage.getItem('Code')

  6. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  7. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  8. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  9. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

随机推荐

  1. C#3.0：新特性

    1.自动属性 下面两种写法作用相同 1 public int Age { get; set;} 1 2 3 4 5 6 private int age; public int Age { get { ...

  2. Spring Boot 监控与管理

    在微服务架构中,我们将原本庞大的单体系统拆分为多个提供不同服务的应用,虽然,各个应用的内部逻辑因分解而简化,但由于部署的应用数量成倍增长,使得系统的维护复杂度大大提升,为了让运维系统能够获取各个为服务 ...

  3. google浏览器查看源码快捷键 ctrl+U

    google浏览器查看源码快捷键 ctrl+U 或则在地址栏的网址前加上:view-source:

  4. tgz的解压

    解压文件tgz 例如文件名为: yyyy.tgz 先使用GZIP解压为TAR文件 gzip -dv yyyy.tgz 同时解压后生成yyyy.tar文件 再使用tar解压yyyy.tar文件 tar ...

  5. django get post files请求知识点

    GET: 我们在浏览器里直接键入地址回车,这种方式其实也是get方式提交了数据,如: http://localhost/login?user=123&pwd=123  就是把用户名123密码1 ...

  6. 前端之js-echarts组件介绍

    Echarts.init: 全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('echarts') 获得. < ...

  7. [Android] JNI中的Local Reference

    参考文章:<在 JNI 编程中避免内存泄漏> 一.Local Reference 深层解析 JNI Local Reference 的生命期是在 native method 的执行期(从 ...

  8. vue 用v-if 或者 v-show 渲染dom时，初次加载闪烁的问题

    js 是等dom加载完成后操作的, 所以加载的时候,会闪烁. 此时,你会惊奇的发现,原来闪烁的dom或者文本 不闪烁了.

  9. 【剑指offer】二进制中1的个数

    输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路:将原数字与1按位进行与操作. public class Solution { public int NumberOf1(int ...

  10. mysql查询优化之一：mysql查询优化常用方式

    一.为什么查询速度会慢? 一个查询的生命周期大致可以按照顺序来看:从客户端,到服务器,然后在服务器上进行解析,生成执行计划,执行,并返回结果给客户端.其中在“执行”阶段包含了大量为了检索数据到存储引擎 ...