随着互连网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据。对此，HTML 规范提出了相关解决方案。

本文为博主学习时所记笔记，参考：黑马 pink 老师前端入门；HTML 本地存储

文章目录

一、本地存储特性
二、window.sessionStorage
三、window.localStorage
四、案例：记住用户名
五、案例：todolist

一、本地存储特性

数据存储在用户浏览器中
设置、读取方便，甚至刷新页面不丢失数据
容量较大，sessionStorage 约 5 M，localStorage 约 20 M
只能存储字符串，可以将对象 JSON.stringify() 编码后存储

HTML 本地存储提供了两个在客户端存储数据的对象：

window.sessionStorage：针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
window.localStorage：里面存储的数据没有过期时间设置

下面分别介绍以上两种方法。

二、window.sessionStorage

几点说明

生命周期为关闭浏览器窗口为止
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用

存储数据

 sessionStorage.setItem(key,value)

例如，点击按钮存储表单数据：

    set.addEventListener('click', function () {var val = ipt.value;sessionStorage.setItem('uname', val);})

效果展示和查看存储数据的步骤：

当然你也可以同时存储多个数据，无非就是设置多个 key 的问题。如下：

    set.addEventListener('click', function () {var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('password', val);sessionStorage.setItem('email', val);})

获取数据

 sessionStorage.getItem(key)

例如，点击获取按钮打印上述存储数据：

    get.addEventListener('click', function () {var uname = sessionStorage.getItem('uname');console.log(uname);})

删除指定数据

 sessionStorage.removeItem(key)

例如，点击删除按钮将存储的数据删除：

    remove.addEventListener('click', function () {sessionStorage.removeItem('uname');})

删除所有数据

 sessionStorage.clear()

例如，点击清空所有数据按钮，可以将当前页面存储的数据都删除。（慎用）

    del.addEventListener('click', function () {sessionStorage.clear();})

三、window.localStorage

几点说明

此方法存储的数据，生命周期永久生效。除非手动删除，否则即使关闭页面数据也会存在。
可以多窗口（页面）共享，同一浏览器可以共享数据。
以键值对形式存储。

存储数据

 localStorage.setItem(key,value)

与上述方法不同，查看数据应该到 Application —— Storage —— Local Storage 中

获取数据

 localStorage.getItem(key)

删除指定数据

 localStorage.removeItem(key)

删除所有数据

 localStorage.clear()

具体存储获取删除操作与上面方法相同，不过需要注意：如果没有手动点击删除数据，即使关闭了浏览器页面，重新打开时依然有之前的数据存储。

还有一点说明：在保证同一浏览器的情况下，即使打开另一个页面，也可以操作前存储的数据的。

四、案例：记住用户名

这个案例其实挺简单，简单说一下原理。如果我们勾选了记住用户名，那么输入的用户名数据将会被本地存储，下次打开此页面时表单中会直接显示此前存储的数据。否则，如果没有勾选，则会删除此前存储的用户名数据。

<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;    }remember.addEventListener('change', function () {if (this.checked) {localStorage.setItem('username', username.value)} else {localStorage.removeItem('username');}})
</script>

五、案例：todolist

此案例是利用 jQuery 写的。

主要是用到本地存储 localStorage ，无论是按下回车还是点击复选框，都要先将数据存储然后将本地存储的数据加载到页面，保证即使关闭页面数据也不会丢失。

采用数组的形式进行存储，如下代码为两条信息的存储示例

    var todolist = [{title: '明天一定要早起！',            // 事项done: true                 // 是否完成}, {title: '晚上不能熬夜了！',done: false}]

注意：

本地存储 localStorage 里面只能存储字符串格式数据，因此需要将对象转换为字符串，利用 JSON.stringify(data) 。
获得本地存储的数据，需要把字符串数据转换为对象格式，利用 JSON.parse(data)

JS 代码

$(function () {// 打开页面时就要进行数据渲染load();// 1. 添加待办事项$("#title").on("keydown", function (event) {if (event.keyCode === 13 && $(this).val()) {var local = getData();// 将最新数据追加给数组local.push({ title: $(this).val(), done: false });// 将此数组存储下来saveDate(local);// 将本地存储数据渲染至页面load(local);$(this).blur().val("");}})// 2. 删除待办事项$("ol, ul").on("click", "a", function () {var data = getData();// 获取 a 标签，自定义索引var index = $(this).attr("data-id");// 删除对应元素数据data.splice(index, 1);// 保存数据到本地存储saveDate(data);// 重新渲染load();})// 3. 点击完成按钮$("ol, ul").on("click", "input", function () {// 获取本地数据var data = getData();// 利用 a 标签的自定义属性获取索引var index = $(this).siblings("a").attr("data-id");// 找到当前复选框，修改 done 属性data[index].done = $(this).prop("checked");// 保存数据saveDate(data);// 重新渲染load();})// 封装函数：读取本地存储的数据function getData() {var data = localStorage.getItem("todolist");if (data !== null) {return JSON.parse(data);    // 返回对象格式} else {return [];}}// 封装函数：保存本地存储数据function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}// 封装函数：数据渲染function load() {var data = getData();// 渲染前将元素内容清除，再用 each 遍历$("ol, ul").empty();// 声明变量记录个数var todoCount = 0;var doneCount = 0;$.each(data, function (i, ele) {if (ele.done) {$("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");doneCount++;} else {$("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");todoCount++;}});// 修改事项个数$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
})

HTML5 —— 本地存储相关推荐

HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性参考文献本地持久化存储一直是本 ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
HTML5本地存储不完全指南
历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服 ...
html5储存类型,html5本地存储-留言板
HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)! var Storage = { saveData:function()//保存数 ...
HTML5本地存储——IndexedDB（二：索引）
在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...
HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
HTML5 本地存储和内容按需加载的思路和方法
HTML5 本地存储和内容按需加载的思路和方法作者:佚名字体:[增加减小] 来源:互联网时间:04-07 16:05:09 我要评论本文将着重介绍HTML5本地存储和内容按需加载的思路和方法 ...
HTML5本地存储使用详解
HTML5本地存储使用详解前言随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择.HTM ...
HTML5 本地存储 localstorage 安全分析
在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...

HTML5 —— 本地存储