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

The..Fuir

已于 2022-04-27 09:45:13 修改

阅读量1k

点赞数

分类专栏： javascript html 文章标签： Js html

于 2022-04-26 19:48:12 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124435149

版权

javascript 同时被 2 个专栏收录

122 篇文章 11 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

web存储

1.1.cookie

cookie 存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生与服务器端，保存于客户端，但是我们也可以通过js来产生cookie 通常情况下，我们通过js-cookie这个库来操作cookie
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>
</head>
<body>
    <script>
        // 创建一个cookie，7天后过期
        Cookies.set("name","this is a test cookie",{ expires: 7 })
        // 获取cookie
        var name = Cookies.get("name")
        console.log(name);
        // 移除cookie
        Cookies.remove("name");
    </script>
</body>
</html>
什么是cookie

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

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

cookie机制

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

客户端发送一个请求到服务器-->服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部-->客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部-->服务器返回响应数据
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script>
    Cookies.set("product","computer",{expires:1/24/60})
    Cookies.set("user",JSON.stringify({name:"张三",password:123}),{expires:7})
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script>
  if(Cookies.get("user")){
      var obj = JSON.parse(Cookies.get("user"))
      document.write(obj.name+"<br>"+obj.password)
      Cookies.remove("user")
  }else{
    document.write("Cookies中没有user")
  }
</script>
在客户端存储数据

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<len;i++){
   //通过索引拿指定的key名字
    var key = storage.key(i);    
    var value = storage.getItem(key);    
    console.log(key + "=" + value);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //**setItem存储value**
        sessionStorage.setItem("key", "value");
        //getItem获取value
        var value = sessionStorage.getItem("key"); 
        //removeItem删除key
        // sessionStorage.removeItem("key"); 
        //clear清除所有的key/value
        // sessionStorage.clear();

        // sessionStorage的key和length属性实现遍历
        var storage = window.sessionStorage;
        for(var i=0, len=storage.length; i<len;i++){
        var key = storage.key(i);
        var value = storage.getItem(key);
        console.log(key + "=" + value);
        }
    </script>
</body>
</html>
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的实例方法
存储数据
localStorage.setItem('accessToken', 'Bearer' + response.data.result.accessToken)
取出数据
localStorage.getItem('accessToken')
删除存储数据
localStorage.removeItem('accessToken')
更改数据
localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)
示例：
<script>
    // 获取sessionStorage中的数据
    // console.log(sessionStorage.getItem('name'));
    // localStorage存放数据
    localStorage.setItem('gender', '男')
    localStorage.setItem('address', '苏州')
    // 在localStorage文件中获取sessionStorage文件中存的数据 跨选项卡获取数据
    // 我们发现是拿不到的
    // 因为sessionStorage中的数据仅限当前选项卡可以拿到
    // 但是我们回到之前的sessionStorage的选项卡中 能够获取到localStorage的数据
    // localStorage是跨选项卡存在的 就算我们关闭浏览器 重新打开 localStorage中的数据也会存在
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件保存</title>
</head>
<body>
  
  <input type="text" id="data" placeholder="input data to save">
  <button onclick="saveItem()">保存</button>
  <script>
    // 保存事件
    function saveItem() {
      var data = document.getElementById('data').value
      console.log(data);
      // localStorage存放
      localStorage.setItem('data', data)
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <script>
    // 给window的对象增加事件监听
    window.addEventListener('storage', showStorage)
    function showStorage(e) {
      if (!e) {
        e = window.event
      }
      /*
        event.key   
        event.oldValue    
        event.newValue  
        event.url     
        event.storageArea
      */
      var str = 'key:' + e.key +
                '\nnewValue:' + e.newValue +
                '\noldValue:' + e.oldValue +
                '\nurl:' + e.url +
                '\nstorageArea:' + e.storageArea
      alert(str)
    }
  </script>
</body>
</html>

The..Fuir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web存储（cookie、session、local)通信、地理位置

web存储1.1.cookiecookie 存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生与服务器端，保存于客户端，但是我们也可以通过js来产生cookie 通常情况下，我们通过js-cookie这个库来操作cookie<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
复制链接

扫一扫

专栏目录