一、定义

  • 随着互联网的快速发展,基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，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. if的条件表达式

    常用的: [ -a FILE ] 如果 FILE 存在则为真. [ -d FILE ] 如果 FILE 存在且是一个目录则返回为真. [ -e FILE ] 如果 指定的文件或目录存在时返回为真. [ ...

  2. go 学习笔记（3）benchmark

    benchmark函数以benchmark开头 benchmark的case一般会跑b.N次,且每次执行都如此 在执行过程中会根据实际case的执行时间是否稳定会增加b.N的次数以达到稳态. pack ...

  3. 创建job,delete定时清理数据

    Job定时删除数据 需求:对一个表,每天删除一月前的历史数据 思路 .编写SQL,删除一月前的历史数据,使用函数取值 .测试JOB创建,查询,维护,管理 .测试布置job,满足效果 ***测试数据准备 ...

  4. Java调用WebService方法总结(2)--JAX-WS调用WebService

    用JAX-WS(Java API for XML Web Services)调用WebService不需要引入其他框架,都是JDK自带的:文中所使用到的软件版本:Java 1.8.0_191.Dom4 ...

  5. 移动端vue2.5去哪儿项目-常见问题整理

    一.项目中遇到的问题.难点及解决方式 1. 移动端开发中的1px边框问题,由于在不同设备屏幕上,可能会使得1px实际在移动端显示不是1px,怎么解决? 2. 移动端click点击事件,会延迟300ms ...

  6. AutoMapper 初次使用心得

    本例以asp.net webform为例: 结构: 主要代码:AutoMapperConfig 类 public class AutoMapperConfig { public static void ...

  7. 关于maven中版本控制问题

    之前我们说过Maven的版本分为快照和稳定版本,快照版本使用在开发的过程中,方便于团队内部交流学习.而所说的稳定版本,理想状态下是项目到了某个比较稳定的状态,这个稳定包含了源代码和构建都要稳定. ma ...

  8. 【DRF框架】认证组件

    DRF框架的认证组件 核心代码:       self.perform_authentication(request)  框架自带模块:    from rest_framework import a ...

  9. FSMN 及其变种 cFSMN DFSMN pyramidal-FSMN

    原文: https://blog.csdn.net/qq_26778411/article/details/89682447 也可以参考:  http://vsooda.github.io/2018/ ...

  10. windows IIS安装php服务及配置

    windows IIS安装php服务及配置 启动IIS服务 打开 "控制面板" => "程序" => "启用或关闭Window功能&quo ...