讲给Android程序员看的前端教程(38)——Web Storage

来源：互联网发布：颜体行书知乎编辑：程序博客网时间：2024/05/22 13:27

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

引子

在前端开发过程中，常利用cookie存取数据；但是cookie存储数据存在一些局限性，比如：

数量和大小的限制 ：cookie的大小通常被限定在4KB。除此以外，有的浏览器限制cookie的个数，比如：低版本IE浏览器限定cookie最大个数为20个；Firefox限定cookie最大个数为50个。
性能不佳：在每次HTTP请求中都需要将cookie作为网络请求的消息头发送至服务器；所以，这势必会带来数据的重复传输并导致额外消耗流量
安全隐患：假若不采用HTTPS或者其他加密手段，那么cookie会以明文的方式在网络传播；显然，这也会带来不小的安全隐患

在HTML5中为了克服由cookie带来的一些限制新增了Web Storage。

Web Storage简介

Web Storage的出现提供了一种在cookie之外存储大量数据的方式。假如有的数据需要保存在客户端而且这些数据不需要每次都发送至服务器，那么Web Storage是个很不错的选择。

W3C中定义的Storage接口，如下所示：

interface Storage {  readonly attribute unsigned long length;  DOMString? key(unsigned long index);  getter DOMString? getItem(DOMString key);  setter void setItem(DOMString key, DOMString value);  deleter void removeItem(DOMString key);  void clear();};

各属性和方法简述如下：

length：storage中保存的key-value对的个数
key(index)：依据索引返回key
getItem(key)：依据key得到其对应的value值
setItem(key，value)：依据key设置其对应的value值
removeItem(key)：依据key删除其对应的key-value对
clean( )：删除storage中所有的key-value对

Web Storage的两种实现：

SessionStorage：为每一次会话维持一个独立的存储区域，该存储区域在页面会话期间有效。
LocalStorage：它和SessionStorage的作用基本一致，只不过会将数据保存在硬盘长期存留。

Web Storage的使用：

我们可通过Window对象的localStorage和sessionStorage属性引用LocalStorage对象和SessionStorage对象进行数据的存储。

Web Storage使用示例

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>storage</title>    <script type="text/javascript">        const NAME="name";        function save(){            var name=document.getElementById("name").value;            var storages=document.getElementsByName("storage");             if(storages[0].checked){                localStorage.setItem(NAME,name);            }else{                sessionStorage.setItem(NAME,name);            }        }        function get(){            var storages=document.getElementsByName("storage");             if(storages[0].checked){                var result=localStorage.getItem(NAME);                alert("name="+result);            }else{                var result=sessionStorage.getItem(NAME);                alert("name="+result);            }        }    </script></head><body>    请输入您的名字：    <input type="text" id="name">     <br><br>    请选择保存方式：    <input type="radio" name="storage" value="local" checked="checked">localStorage    <input type="radio" name="storage" value="session">sessionStorage    <br><br>    <input type="button" value="存入数据" onclick="save()"/>    <input type="button" value="获取数据" onclick="get()"/></body></html>

在该示例中，分别运用了SessionStorage和LocalStorage进行数据的存储；运行后效果如下图所示：

这里写图片描述

当数据保存到Web Storage之后，我们打开浏览器开发者工具，就可以看到这些数据了，请看下图：

这里写图片描述

看完了Web Storage，我想做Android开发的童鞋或许想起了我们熟悉的东西——SharedPreferences。嗯哼，味道差不多。

阅读全文

1 0