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. 用shell通过jps -m来杀死进程

    #!/bin/sh ### find pid jps=`jps -m` echo "$jps"|while read i do if[[ $i =~"agentTestT ...

  2. 免费SMTP邮件服务:Mandrill,Sendgrid,Mailjet,Postmarkapp,MailChimp

    免费的SMTP发邮件服务平常几乎都没有怎么关注,Wordpress发邮件几乎用普通的邮箱的SMTP服务就可以完成任务,但是自从用了Discourse.Ghost博客后,发现找到一个合适的.免费配额大的 ...

  3. Arduino在64位WIN7下无法安装驱动的解决办法

    1.获取权限 打开C:\Windows\System32\DriverStore\FileRepository,对着FileRepository文件夹,右键 >>属性 >>安全 ...

  4. TdxMemData 的Bug和使用

    aa.CopyFromDataSet(acdsBase);//克隆一个,与LoadFromDataSet区别,如果设置了Field,那么L只会导入设置的部分,而C则是全部复制过来 TdxMemData ...

  5. py2exe 打包的两种方式

    cmd模式 #!/usr/bin/python #-*- coding: UTF-8 -*- from distutils.core import setup import py2exe setup( ...

  6. 【转】SQL Server日志文件过大 大日志文件清理方法 不分离数据库

    https://blog.csdn.net/slimboy123/article/details/54575592 还未测试 USE[master] GO ALTER DATABASE 要清理的数据库 ...

  7. [CMAKE] 详解CMakeLists.txt文件

    [快速查询]https://cmake.org/cmake/help/v2.8.8/cmake.html#section_Commands 1 CMake简介 CMake是跨平台编译工具,比make更 ...

  8. Jenkins小试

    之前有提到和同事搭建了个Git+Gerrit+Jenkins环境,可惜都在一台机器上,中间IT重装系统后就杯具了,没有备份,只好重来. 6月份项目发布了首个Open API,那时候建了个api uni ...

  9. C#连接Access数据库显示未在本地计算机注册解决方法

    C#连接数据库时会出错 语句如下 string mystr = @"Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\Users\hasee ...

  10. Scala类与对象

    类简介 简介 类是对象的蓝图.一旦你定义了类,就可以用关键字new根据类的蓝图创建对象.在类的定义里,可以放置字段和方法,这些被笼统地称为成员.对于字段,不管是val还是var定义的,都是指向对象的变 ...