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. Hive 严格模式与非严格模式

    1. hive严格模式 hive提供了一个严格模式,可以防止用户执行那些可能产生意想不到的不好的效果的查询.即某些查询在严格模式下无法执行.通过设置hive.mapred.mode的值为strict, ...

  2. JSON C# Class Generator ---由json字符串生成C#实体类的工具

    json作为互联网上轻量便捷的数据传输格式,越来越受到重视.但在服务器端编程过程中,我们常常希望能通过智能提示来提高编码效率.JSON C# Class Generator 能将json格式所表示的J ...

  3. SpringBoot+Maven 多模块项目的构建、运行、打包

    SpringBoot+Maven 多模块项目的构建.运行.打包 https://blog.csdn.net/zekeTao/article/details/79413919

  4. 多进程共享数据，真正的通信Manager

    Managers A manager object returned by Manager() controls a server process which holds Python objects ...

  5. 开发人员行走Unix的随身四艺

    Unix系统永远只会越来越多,开发人员就没必要特意学习它们的安装.配置和管理了,就全部交给集成人员吧.     但开发人员行走于Unix之间,依然有四样东西要熟练. 一.VI     虽然Unix上的 ...

  6. 【SpringBoot】支持Java1.6

    开发环境 Java 1.6; 需要修改的配置 指定java和tomcat版本 <!-- TO Support JDK 1.6 start --> <java.version>1 ...

  7. C#实现mongodb自增列的使用

    创建一个集合存放_id db.createCollection("counters") 加入需要自增的字段 { "_id":"productid&qu ...

  8. HTML-CSS font-family：中文字体的英文名称

    本文转自网络,找不到原地址了,在这里保留了作者名. font-family:中文字体的英文名称 ellisontang 发表于2011-07-15 16:33 宋体* SimSun 黑体* SimHe ...

  9. Hive深入学习--应用场景及架构原理

    Hive背景介绍 Hive最初是Facebook为了满足对海量社交网络数据的管理和机器学习的需求而产生和发展的.互联网现在进入了大数据时代,大数据是现在互联网的趋势,而hadoop就是大数据时代里的核 ...

  10. [UE4]用Blenspace混合空间动画代替AimOffset动画偏移