一、定义

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

    package main import ( "bufio" "fmt" "os" "strings" ) func ma ...

  2. redis客户端介绍及php客户端的下载安装

    一.PHP客户端1.官方提供了几款PHP客户端,包括amphp/redis.phpredis.Predis.Rediska.推荐使用官方推荐的两款客户端,phpredis.Predis2.phpred ...

  3. 原子类 Atomic

    @Testpublic void testAtomicBoolean() { AtomicBoolean atomicBoolean = new AtomicBoolean(); boolean b ...

  4. Spark 系列（十三）—— Spark Streaming 与流处理

    一.流处理 1.1 静态数据处理 在流处理之前,数据通常存储在数据库,文件系统或其他形式的存储系统中.应用程序根据需要查询数据或计算数据.这就是传统的静态数据处理架构.Hadoop 采用 HDFS 进 ...

  5. Hadoop1-认识Hadoop大数据处理架构

    一.简介概述 1.什么是Hadoop Hadoop是Apache软件基金会旗下的一个开源分布式计算平台,为用户提供了系统底层细节透明的分布式基础架构 Hadoop是基于java语言开发,具有很好的跨平 ...

  6. Java日志logback使用

    pom中添加: <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</ ...

  7. SpringCloud整合过程中jar依赖踩坑经验

    今天在搭建SpringCloud Eureka过程中,一直在报pom依赖错误,排查问题总结如下经验. 1.SpringBoot整合SpringCloud两者版本是有严格约束的,详细见SpringBoo ...

  8. 14-4 ADO.NET简介

    微软数据访问方式历史阶段 ①ODBC(Open Database Connectivity)是第一个使用SQL访问不同关系数据库的访问技术.使用ODBC应用程序能够通过单一的命令操作不同的数据库,而开 ...

  9. C# vb .net实现不透明度调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的不透明度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  10. NEST routing timeout scroll

    /// <summary> /// PUT /employee/employee/9e5e50da-7740-488e-bee2-b24951435691?routing=test_rou ...