一、定义

  • 随着互联网的快速发展,基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案
  • 本地存储设置读取方便，容量较大，sessionStorage约5M，localStorage约20M，但是只能存储字符串，但是可以将对象JSON.stringify（）编码后存储

二、两种存储方式

①window.sessionStorage 生命周期为关闭浏览器窗口，在同一个窗口（页面）下数据可以共享

②window.localStorage   永久生效，除非收到删除（服务器方式访问然后清除缓存），可以多窗口（页面）共享

三、相关方法

①setItem（key，value） 设置存储内容

②getItem（key） 读取存储内容

③removeItem（key）删除键值为key的存储内容

④clear（） 清除所有存储内容

四、案例：搜索历史记录

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索历史记录</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            margin-left: 300px;

        }

        ul{

            list-style: none;

        }

        ul,li,div{

            width: 250px;

            padding: 10px 0;

            margin-left: 10px;

            border-bottom: 1px dashed #ccc;

        }

        a{

            float: right;

        }

        input{

            padding: 5px;

            margin: 10px;

        }

    </style>

</head>

<body>

    <input type="search" placeholder="输入搜索关键字">

    <input type="button" value="搜索">

    <div><a href="javascript:;">清空搜索记录</a></div>

    <ul>

        <li>没有搜索记录</li>

        <li><span>手机</span><a href="javascript:;">删除</a></li>

        <li><span>手机</span><a href="javascript:;">删除</a></li>

        <li><span>手机</span><a href="javascript:;">删除</a></li>

        <li><span>手机</span><a href="javascript:;">删除</a></li>

        <li><span>手机</span><a href="javascript:;">删除</a></li>

    </ul>

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

    <script>

        // 使用json数据存储搜索历史记录;预设一个key为historyList;采用localStorage存储

        $(function(){

            // 1.默认根据历史记录渲染历史列表

            var historyListJson=localStorage.getItem("historyList") ||'[]';

            var historyListArr=JSON.parse(historyListJson);//数组格式的数据

            var render=function(){

                var html='';

                historyListArr.forEach(function(item,index){

                html +='<li><span>'+item+'</span><a data-index="'+index+'" href="javascript:;">删除</a></li>'

                });

                html=html || '<li>没有搜索记录</li>';

                $('ul').html(html);

            }

            render();

            // 2.点击搜索按钮更新历史记录,并且渲染历史列表

            $('[type="button"]').on('click',function(){

                var value=$.trim($('[type=search]').val());

                if(!value){

                    alert('请输入搜索关键字');

                    return false;

                }

                historyListArr.push(value);//追加一条历史记录

                localStorage.setItem('historyList',JSON.stringify(historyListArr));//保存

                render();//渲染

                $('[type=search]').val('');//清空搜索框

            });

            // 3.点击删除按钮删除对应的历史记录,并且渲染历史列表

            $('ul').on('click','a',function(){

                var index=$(this).data('index');

                historyListArr.splice(index,1);//删除

                localStorage.setItem('historyList',JSON.stringify(historyListArr));//保存

                render();//渲染一次

            });

            // 4.点击清空历史记录,清空所有的历史记录并渲染历史列表

            $('div a').on('click',function(){

                historyListArr=[];//清空,localStorage.clear()慎用

                localStorage.setItem('historyList','');

                render();

            });

        })

    </script>

</body>

</html>

本地存储API的更多相关文章

  1. H5 本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  2. Localstorage本地存储兼容函数

    前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...

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

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

  4. H5的本地存储

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  5. HTML5 本地存储的用法

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

  6. H5本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

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

  8. 理解 Android 本地数据存储 API

    利用首选项.SQLite 和内部及外部内存 API 对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说,能够在移动设备上本地存储数据是一种非常关键的功能.作为一名开发人员,您经常需要存储诸 ...

  9. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

随机推荐

  1. Loader ,URLLoader ,URLStream的区别

    AS3代码   (1)  Loader              Loader 类可用于加载 SWF 文件或图像(JPG.PNG 或 GIF)文件. 使用 load() 方法来启动加载. 被加载的显示 ...

  2. Ubuntu /etc/security/limits.conf 不生效问题

    一.问题描述 修改 /etc/security/limits.conf ,重启之后不生效 内容如下: * soft nofile * hard nofile root soft nofile root ...

  3. HDFS-HA高可用集群搭建

    HA高可用集群搭建 1.总体集群规划 在hadoop102.hadoop103和hadoop104三个节点上部署Zookeeper. hadoop102 hadoop103 hadoop104 Nam ...

  4. java ArithUtil 数据计算精度工具

    ArithUtil: /** * 如果需要精确计算,非要用String来够造BigDecimal不可 */ package com.leaniot.securitymonitor.util; impo ...

  5. ESP8266 智能家居简单实现

    本文转自CSDN,地址 https://blog.csdn.net/jsagacity/article/details/78531819 全文如下 : 前段时间,公司利用 ESP8266 这个WiFi ...

  6. semaphore demo 并行 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    import 'dart:async'; import 'package:semaphore/semaphore.dart'; import 'dart:io'; import 'dart:conve ...

  7. input里面的提示文字修改（placeholder里的文字修改，el-input也适用）

    input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* M ...

  8. Part_one:Redis第一次接触

    1.redis学习 数据默认写入到内存,如果断电,服务器宕机,redis进程挂掉,数据会丢失. selenium操作浏览器时,要注意浏览器资源释放,方式内存泄露,崩溃 mysql是文件型数据库,默认持 ...

  9. jar包下载网站

    https://mvnrepository.com/ https://www.kumapai.com/open/query/?querytype=title&querykey=cglib ht ...

  10. Android Jetpack组件 - ViewModel,LiveData使用以及原理

    本文涉及的源码版本如下: com.android.support:appcompat-v7:27.1.1 android.arch.lifecycle:extensions:1.1.1 android ...