web存储（cookie、session、local)通信、地理位置

web存储

 

1.1.cookie

cookie 存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生与服务器端，保存于客户端，但是我们也可以通过html" class="superseo">js来产生cookie 通常情况下，我们通过js-cookie这个库来 *** 作cookie

什么是cookie

HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

打个比方，我们去银行办理储蓄业务，第一次给你办了张yhk，里面存放了身份z、密码、手机等个人信息。当你下次再来这个银行时，银行机器能识别你的卡，从而能够直接办理业务。

cookie机制

当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：

客户端发送一个请求到服务器-->服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部-->客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部-->服务器返回响应数据

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储

• sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

会话存储，其特点如下：

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。

关闭对应浏览器tab，会清除对应的sessionStorage。

实例方法：setItem、getItem、clear、removeItem

sessionStorage的实例方法

setItem存储value

用途：将value存储到key字段

sessionStorage.setItem("key", "value");

getItem获取value

用途：获取指定key本地存储的值

var value = sessionStorage.getItem("key");

removeItem删除key

用途：删除指定key本地存储的值

sessionStorage.removeItem("key");

clear清除所有的key/value

用途：清除所有的key/value

sessionStorage.clear(); 

sessionStorage的key和length属性实现遍历

sessionStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.sessionStorage;
for(var i=0, len=storage.length; i

    
    
    
    


    

• localStorage

localStorage 本地存储，关闭当前tab甚至于在关闭浏览器时候数据依旧会保存 实例方法：setItem、getItem、clear、removeItem

什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势与局限

优势：

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限：

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage的实例方法

1. 存储数据

   localStorage.setItem('accessToken', 'Bearer' + response.data.result.accessToken)

2. 取出数据

   localStorage.getItem('accessToken')

3. 删除存储数据

   localStorage.removeItem('accessToken')

4. 更改数据

   localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)

   示例：

   
   
   
     
     
     
   
   
     
     
     保存