本地数据存储

网络统计学中，统计数据的基本载体不再是“纸张“，而是“磁盘“。在网络环境下，统计数据的主要存储在云空间、服务器中，本地电脑硬盘以及U盘和光盘等也是数据存储的常用载体。网络统计学做为一门开源的网络教程和数据处理兼顾的平台，对于用户统计数据采用本地存储模式（用户数据处理在前台进行，通常不用上传到服务器），这样可以大大减轻服务器的负担。

1、Cookie

说起本地存储，有必要提起“Cookie”。Cookie英文意指饼干，不过在电脑术语中它可不像饼干那么简单。在网络技术中，Cookie就是服务器暂存放在你计算机上的信息，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookie会帮把你在网站上所打的文字或是一些选择，都记录下来。当下次你再光临同一个网站，Web服务器会先看看有没有它上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

Cookie的使用很普遍，许多提供个人化服务的网站，都是利用Cookie来辨认使用者，以方便送出为用户量身定做的内容，像是Web接口的免费E-mail网站，都要用到Cookie。Cookie中记载的资料相有限，Cookie是安全的。网站不可能经由Cookie获得你的E-mail地址或是其它私人资料，更没有办法透过Cookie来存取你的计算机。但是如果你实在不喜欢Web服务器乱丢饼干(Cookie)到你家，当然可以让浏览器拒绝网站存放Cookie到你的计算机。只要在IE的“工具”菜单下选择“Intertnet选项”的“安全”，按自定义级别，将Cookie部分设为关闭，按确定，关闭浏览器，再重新启动浏览器即可。当你关闭Cookie之后，很多网站的个人化服务功能很可能也不能再使用了。

在Cookie中保存浏览数据时应当注意，Cookie有个数和大小的限制，大小一般是4k。

Microsoft的InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie；
Firefox每个域名cookie限制为50个；
Opera每个域名cookie限制为30个；
Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。

不同浏览器间cookie信息的大小限制也不同，

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号；
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号；　　
Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

注：一个英文字母或数字占一个字节，一个汉字占两个字节

在网络编程技术中，Cookie已经被使用多年，但做为网络统计学客户端数据支持，其数量和大小限制显然无法满足要求，但数据量较少时，如用户爱好、参数设置记录等，可以运用Cookie存储。

（1）cookie有下面几个特性：

有过期时间，这个可以设置，如果不设置默认是关闭浏览器则清除；
有大小限制，一般cookie的条数不会超过50条，但因浏览器的不同也会有差异，单个cookie的大小不能超过2M；
cookie是以键值对的形式保存在物理硬盘上的，类似json格式。

（2）JS设置cookie:

cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。假设在某个页面中要保存cookie变量为，

username的值("jack")
password的值（"12345"）
过期时间30分钟

相应的JS代码为，

var date=new Date(); 
date.setTime(date.getTime()+30*60*1000); //设置date为当前时间+30分
document.cookie="username=jack;password=12345";expires="+date.toGMTString()

（3）JS获取cookie:

cookie做为格式化长字符串被保存在本地，如下代码可按指定名称获得其cookie值，

var name="lei"; //获取名称为"lei"的cookie值
var oArr=document.cookie.split("; "); //获取cookie数组
//document.cookie为cookie格式化长字符串，不同的cookie被符号"; "分割
var oLen=oArr.length; //获取cookie数组长度
var oValue;
for (var i=0; i<oLen; i++) {
  if (oArr[i].split("=")[0]==name) {oValue=oArr[i].split("=")[1]; break;}
  //cookie值对有符号"="分割
  }
alert (oValue); //显示名称为"lei"的cookie值

（4）cookie操作面板：

cookie名称


cookie值

    

2、localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是用户的计算机。

localStorage只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。而且对于某一个域下不同网页来说，localStorage是共享的（多个窗口共享一个“数据库”）。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

在安全性方面，localStorage是域内安全的，即localStorage是基于域的。任何在该域内的所有页面，都可以访问localStorage数据。但仍然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在chrome浏览器下是无法读取的。同样，由于localStorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。

HTML5 localStorage方式让网站能够把信息存储到你本地的计算机上，以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的Storage是存储在你的计算机上，网站在页面加载完毕后可以通过JavaScript来获取这些数据。

（1）localStorage基本语法

获取localStorage的长度：window.localStorage.length
添加/编辑localStorage的内容：window.localStorage.setItem(键,值);
根据对应的索引去获取localStorage的key的值：window.localStorage.key(索引);
根据对应的key获取对应的的value：window.localStorage.getItem(key);
根据对应的key删除localStorage：window.localStorage.removeItem(key);
删除所有localStorage（慎用）：window.localStorage.clear();

（2）localStorage操作面板

localStorage名称


localStorage值

    

（3）cookie和localStorage命名规则

每个人都有自己独特的文件命名规则或习惯，目的是为了方便文件的查询。由于cookie和localStorage数据被保存在系统指定的固定空间，而不是自定义的文件夹中，且由不同网页设计者创建，cookie和localStorage数据文件命名显得非常重要。命名规则如下，

命名要有自己的独特名称标记
必要时命名要反映出数据主题
必要时命名要反映出数据创建时间
采用下划线“_"分割名称，创建分层（级）命名
尽量不要用中文命名

例如如某种商品价格和销售量统计数据如下表：

表1 - WT公司某品牌红酒2015各月份价格和销售量统计数据
月份123456789101112
价格（元）877686698570788388785874
销量（瓶）233420252128212319242934

表1中的价格和销售量数据可以按格式组合书写为，

"WT公司某品牌红酒2015各月份价格和销售量统计数据&月份|价格（元）|销量（瓶）&1,2,3,4,5,6,7,8,9,10,11,12|87,76,86,69,85,70,78,83,88,78,58,74|23,34,20,25,21,28,21,23,19,24,29,34"

表1中的数据可以按格式简记为，

"87,76,86,69,85,70,78,83,88,78,58,74|23,34,20,25,21,28,21,23,19,24,29,34"

将数据按localStorage命名保存在本地，命名为，"WT_win_2015"，试在localStorage操作面板完成数据存储过程。

操作过程：

将命名"WT_win_2015"复制到localStorage操作面板的”localStorage名称“文本框中
将数据，
    "WT公司某品牌红酒2015各月份价格和销售量统计数据&月份|价格（元）|销量（瓶）&1,2,3,4,5,6,7,8,9,10,11,12|87,76,86,69,85,70,78,83,88,78,58,74|23,34,20,25,21,28,21,23,19,24,29,34"
复制到localStorage操作面板的”localStorage值“文本框中
点击“localStorage设置”，保存数据到本地
查看“localStorage名称列表”中的命名数据"WT_win_2015"

3、本地文件导入

cookie和localStorage由系统指定存储在特定空间，如果数据需要以独立文件的形式通过邮件或微信等进行传递、交换则很不方便。另外，数据量很大时（几十个MB），localStorage无法存储。这时需要将数据文件独立存储和导入。

HTML5为我们提供了一种与本地文件系统交互的标准方式（File Api）。下面HTML文档可将本地数据文件导入指定文本框中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style></style>
<script language="JavaScript">
function  handleFiles(files) {
if(files.length) {
  var file = files[0];
  var reader = new FileReader();
  reader.onload = function() {
    document.getElementById("oData").value = this.result;
    };
  reader.readAsText(file);
  }
}
</script>
</head>
<body>
  <textarea id="oData" style="100%; height:200px;"></textarea><p/>
  <div style="100%; text-align:right; padding-top:0px;">
  <input type="file" id='file' multiple="multiple" width="80px" onchange="handleFiles(this.files)"/>
  </div>
</body>
</html>

（1）导入文件操作面板

数据导入文本框

（2）导入文件注意事项

导入文件类型一般如下扩展名的纯文本文件：.txt/.js/.csv/.css/*.html。

导入数据文件中文时可能显示乱码。除了EXCEL文本文件*.csv，其它扩展名文件用UTF-8编码方式保存可避免乱码，同时网页也设置为UTF-8编码。纯文本文件编辑和保存建议使用WINDOWS自带的“记事本”。

打开EXCEL文本文件.csv时中文显示乱码，可将.csv另存为*.txt文件，另存步骤：“工具”（下拉按钮）—“Web选项”—“编码”—“将此文件另存为”（下拉选项）—Unicode(UTF-8)

随着HTML5的推广运用，利用网页处理本地数据成为现实。运用网络技术将统计数据按预定格式储存、导入、处理和展示，体现了网络统计学的基本特征。当数据量较大时，运用网页处理数据的效率会大大降低，有时甚至出现“死机”。目前，网页进行大数据运算还很吃力，但是这里还是推荐运用Google的Chrome浏览器。无论是对HTML5的支持、还是运算速度，Chrome浏览器都是实现网络统计学的最佳选择。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cloudtj/p/6110249.html