浏览器存储

最新推荐文章于 2022-07-02 13:49:13 发布

【希卡利】

最新推荐文章于 2022-07-02 13:49:13 发布

阅读量104

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_58017699/article/details/125154539

版权

浏览器存储

浏览器给前端开发人提供了存储数据。

作用：实现数据持久化存储。可以实现数据的共享

url传参

location.href 跳转链接并拼接下一个页面需要的参数
在两一个页面中location.href获取页面信息，并对`?`后面参数进行格式化处理
最后使用格式化后的参数。

数据持久化存储locaStorage

为什么需要locaStorage

只要浏览器中数据需要持久化存储都可以使用localStorage

1：大小5M

2: 需要使用ap才能删除数据

3：应用

存储登录成功后，接口返回的数据。用该数据判断是否登录

页面中不需要频繁更新的数据，可以存在locaStorage中。用于较少http请求次数提高性能

例如：首页第一次获取商品列表数据，

例如：记住密码

例如：存储浏览器记录等

locaStorage api:

localStorage.getItem()

localStorage.setItem()

localStorage.removeItem()

localStorage.clear()

locaStorage api:

<!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>
    <button id="delet">删除数据</button>
    <button id="clear">清空</button>
    <script>
        delet.onclick = function(){
            // 删除某一条数据
            localStorage.removeItem('token')
        }
        clear.onclick = function(){
            // 清空
            localStorage.clear()
        }
      
    </script>
</body>
</html>

cookies

cookies 只是为了用户信息存在的，不存储浏览器中其他数据

4kb

存储用户登录信息（一般是服务端自动存储的）

数据持久化存储 indexDB

为什么需要indexDB

因为locaStorage 不满足所有数据存储。如果数据量超过5M locaStorage 不能解决

indexDB 数据库；可以创建数据库

一个数据库下游多个表

一个表中有很多字段

一个表中可以存储很多数据

indexDB是什么？

浏览器数据库：异步存储的数据。存在操作indexDB的事件监听

indexDB解决了什么问题？

普通的列表可以使用locaStorage解决。如果 3d效果，大量数据 5M太小了例如：three.js D3.js 画的一个模型；有的是几十兆几十兆的数据对于一般的服务器来说加载速度特别慢，为了解决加载速度慢问题。我们通过本地存储解决。

大小超过240M

indexDB:

<!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>
    <h1>indexDB</h1>
    <script>
        // 第一步: 打开页面必须要有服务 liveServer

        // 第二步：打开数据库（没有会自动创建）,数据库可以有多个
        var dbName = 'haoJing';  // 数据库名
        var version = 1;  // 版本好
        var storeName = 'haoJingStore';  // 表名
        var indexDB = window.indexedDB; // 获取数据库实例对象
        console.log(indexDB);
        /**
         * indexedDB.open(name,version) 打开数据库
         * 返回值：实例对象
         * 数据打开；读取 异步
         */ 
        var request = indexDB.open(dbName,version) // 打开数据库
        console.log(request);

        var db = null; // 保存数据库中数据
          // 当数据库创建或者升级的时候会触发
        request.onupgradeneeded = function(e){
            console.log('当数据库创建或则升级是后触发 version变更触发');
            db = e.target.result;
            // 创建表
            var objectStore = db.createObjectStore(storeName,{
                keyPath:'id'
            })
            // var store =  db.createObjectStore('student',{
            //     keyPath:'id'
            // })
        }

        // 数据库打开成功时候触发
        request.onsuccess = function(e){
            console.log('数据库打开成功',e);
            console.log('获取数据库对象',e.target.result);
            db = e.target.result;
        }
        
        // 数据库打开失败触发
        request.onerror = function(){
            console.log('打开数据库失败');
        }
      
    </script>
</body>
</html>

临时存储 sessionStorage

当浏览器关闭时候，数据自动删除只要是关闭浏览器之前，需要持久存储数据。

5M

浏览器关闭自动删除数据

应用：与locaStorage差不多

api

sessionStorage.getItem()

sessionStorage.setItem()

sessionStorage.removeItem()

sessionStorage.clear()

sessionStorage:

<!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>
    <!-- 
        1: 数据需要请求服务器获取的，
        2：有了数据后才能存
        因为获取数据比正常代码执行慢，所以存的代码也不正常代码慢
        执行慢的代码异步代码；执行快的同步代码
     -->
    <button>异步本地存储商品列表</button>
    <script src="../../plugin/jquery.js"></script>
    <script>
        $('button').click(function(){
            $.ajax({
                url: 'http://49.232.47.192:9527/api/goodList',
                method:'get',
                data:{
                    page:1
                },
                success:function(data){
                    console.log(data);
                    //  JSON.stringify(data) 将对象变为json字符串
                    data = JSON.stringify(data);
                    console.log(data);

                    sessionStorage.setItem('shoplist',data)
                }
            })
        })

        // 2测试浏览器关闭 数据自动删除
    </script>
</body>
</html>