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. Elasticsearch的脚本化数据导入导出

    我用的ES的版本是2.4.1,由于没有相应的命令实现数据的导入和导出,就是像mysql的那种mysqldump类似的指令. 更苦逼的是,我们的生产和测试环境,还不能联网,连ES的第三方的插件都没有办法 ...

  2. 【java】匿名对象

    匿名对象使用的场景:1.如果一个对象只调用一个方法一次的时候,就可以用匿名对象来调用. 一般不会用匿名对象给属性赋值,无法获取属性值,每次new 都是一个新的对象. new Car().run();/ ...

  3. RGB Resampler IP核的测试

    关于RGB Resampler IP核的测试 1.RGB Resampler功能描述 将输入的RGB数据流转换成其它格式的RGB数据流. 2.功能验证 设置源图像像素数据为:3X4格式. 设置RGB ...

  4. CentOs6.7 python2.6升级到2.7.11

    1.查看当前python的版本 #python -V Python 2.6.6 2.下载Python-2.7.11 wget https://www.python.org/ftp/python/2.7 ...

  5. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  6. spring cloud和spring boot两个完整项目

    spring cloud和spring boot两个完整项目 spring cloud 是基于Spring Cloud的云分布式后台管理系统架构,核心技术采用Eureka.Fegin.Ribbon.Z ...

  7. WPF实现打印用户界面功能2

    帮助类: using System; using System.Drawing.Printing; using System.IO; using System.Windows.Forms; names ...

  8. 跟着未名学Office - 高效工作Outlook

    目录 第一篇邮件与联系人    1 第一节    使用与技巧    1 第二节    高效    11 第二篇    事务助手    21 第一节    日程管理    21 第二节    任务    ...

  9. 直接突破百度网盘，用IDM或者迅雷下载。

    直接突破百度网盘,用IDM或者迅雷下载.推荐浏览器: 360 ,CHORME360,: 打开网盘下载页,然后F12→找到CONSOLE→刷新→输入代码“Object.defineProperty(th ...

  10. react中的路由模块化

    在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...