一、定义

  • 随着互联网的快速发展,基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，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. 【IDEA使用技巧】（2） —— 模板设置

    1.IntelliJ IDEA模板使用 1.1.IDEA Live Templates的使用 选择File—Settings,在Editor中选择Live Templates,即可查看现有对所有语言的 ...

  2. Java doc注释

    常用Java注释标签(Java comment tags) @author 作者 适用范围:文件.类.方法 (多个作者使用多个@author标签标识,java doc中显示按输入时间顺序罗列.) 例: ...

  3. promethus监控nginx

    一.摘要 promethues监控nginx可选两个exporter,通过nginx_exporter主要是获取nginx-status中的内建的指标,nginx自身提供status信息,较为简单,p ...

  4. tkinter学习笔记_06

    12.弹窗 messagebox import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title(" ...

  5. 2019牛客国庆集训派对day3

    E. Grid 大意: 给定$n\cdot m$个点的图, 初始无边, $q$个操作, $(1,a,b)$表示第$a$列到第$b$列全连起来, $(2,a,b)$表示把第$a$行到第$b$行全连起来, ...

  6. 缺陷的背后（四）---多进程之for循环下fork子进程引发bug

    导语 业务模块为实现高并发时的更快的处理速度,经常会采用多进程的方式去处理业务.多进程模式下常见的三种bug:for循环下fork子进程导致产生无数孙子进程,僵尸进程,接口窜包.本章主要介绍第一种常见 ...

  7. iTextSharp 不适用模板 代码拼接PDF

    /// <summary> /// 打印移库单 /// </summary> /// <param name="guid"></param ...

  8. ADO.NET 五（DataAdapter 与 DataSet）

    在执行对表中数据的查询时还能将数据保存到 DataSet 中,但需要借助 DataAdapter 类来实现. 在实际应用中,DataAdapter 与 DataSet 是在查询操作中使用最多的类. 此 ...

  9. 【转载】Javascript使用Math.floor方法向下取整

    在Javascript的数值运算中,很多时候需要对最后计算结果向下取整,Math.floor是javascript中对计算结果向下取整的函数,它总是将数值向下舍入为最接近的整数.此外Math.ceil ...

  10. UI5-技术篇-Hybrid App-3-jsbin百度地图

    今天研究了下如何在SAPUI5中加载百度地图,现将相关过程进行备注. 1.实现思路 1.1了解百度地图相关应用过程 A.百度地图申请应用AK:http://lbsyun.baidu.com/apico ...