前端与SQL

本篇将介绍前端本地存储里的Web SQL和IndexedDB，经由过程一个案例介绍SQL的一些概念。

1. 地图报表的案例

如今要做一个地图报表，如下图所示：

(1)长处

将所有的订单数据做一个图表展示，左边的地图展示每个city的成单情况，右边的图形，展示比来7天的成单情况。因为后端的数据须要前端做一些解析，如向谷歌请求每个city的经纬度，所今后端给前端原始的订单数据，前端进行格局化和归类展示。别的把原始数据直接放前端，前端处理起来可以比较灵活，想怎么展示就怎么展示，不消每次展示方法变的时刻都须要找后端新加接口。

然则数据放在前端治理，响应地就会惹人一个问题——若何高效地存储和应用这些数据。最起码处理起来不要让页面卡了。

2. cookie和localStorage

—cookie的数据量比较小，浏览器限制最大年夜只能为4k，而—localStorage和sessionStorage合适于小数据量的存储，firefox和Chrome限制最大年夜存储为5Mb，如下火狐的config：

加粗的字就是我在空格琅绫擎填入的器械，它就会拼成一灸┞俘当的SQL语句——萌芽order_data表的所稀有据，结不雅如下：

localStorage是存放在一个本地文件琅绫擎，在笔者的Mac上是放在：

/Users/yincheng/Library/Application Support/Google/Chrome/Default/Local Storage/ http_www.test.com.localstorage

用文本编辑器打开这个二进制文件，可以看到本地存储的内容：

如不雅返回空的结不雅集，解释这个orderId不存在。

可以参照控制台的输出：

如不雅一个网站要用掉落5Mb硬盘空间，那么打开过一百个网页就得花500Mb的空间，所以本地存储localStorage的空间限制得比较小。

别的，可以看到localStorage是以字符串的方法存储的，存之前要先JSON.stringify变成字符串，取的时刻须要用JSON.parse恢复成响应的格局。localStorage合适于比较简单的数据存放和治理。

3. 治理复杂数据

后端给我如许的JSON数据：

tx.executeSql(`insert into order_data 
 
values(${order.orderId}, '${order.format_city}', 
 
${order.lat}, ${order.lng}, ${order.price}, '${date}')`);

[ 
 
{“orderId”:100314,”userId”:379558604617762,”city”:”ca”,”state”:”ca”,”zipcode”:”91000″,”address”:”11″,”price”:2698.00,”createTime”:1477651308000}, 
 
{“orderId”:100821,”userId”:514694887070560,”city”:”San Francisco”,”state”:”CA”,”zipcode”:”94103″,”address”:”251 Rhode Island St #105″,”price”:2182.00,”createTime”:1481104358000} 
 
]

我用这些数据去请求它们的经纬度。

这些数据的量比较大年夜，有成百上千甚至几万条数据，—数据须要复杂的萌芽，须要支撑：