精华内容
下载资源
问答
  • 我为当前项目测试了一些本地存储库。想知道他们有什么很棒的功能吗?继续阅读。Local Storage Bridgehttps://github.com/krasimir/lsbridge如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,你不必用...

    我为当前项目测试了一些本地存储库。想知道他们有什么很棒的功能吗?继续阅读。

    Local Storage Bridge

    https://github.com/krasimir/lsbridge

    如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,你不必用艰难的方式。Local storage bridge在这里让任务变得更简单。

    基本使用:

    // 发送
    

    Basil.js

    cb7c1ba665f85514dfcf766c3121dbe1.png

    Basil.js统一了session、localStorage和cookie,为你提供了一种处理数据的直接方法。

    基本使用:

    let 

    store.js

    https://github.com/marcuswestin/store.js

    Store.js像其他东西一样处理数据存储。但还有更多的功能,它的一个高级特性是让你更深入地访问浏览器支持。

    基本使用:

    store

    lscache

    https://github.com/pamelafox/lscache

    它与localStorage API类似。事实上,它是localStorage的一个封装器,并使用HTML5模拟memcaches函数。在上面的文档中发现更多的功能。

    基本使用:

    lscache

    Lockr

    fca2edb06941cf1a7f9e8b2dbf1cb9d6.png

    Lockr建立在localStorage API之上。它提供了一些有用的方法来更轻松地处理本地数据。

    是什么让你要使用此库而不是localStorage API?

    好吧,localStorage API仅允许你存储字符串。如果要存储数字,则需要先将该数字转换为字符串。在Lockr中不会发生这种情况,因为Lockr允许你存储更多的数据类型甚至对象。

    基本使用:

    Lockr

    Barn

    https://github.com/arokor/barn

    Barn在localStorage之上提供了一个类似Redis的API。如果持久性很重要,那么你将需要这个库来保持数据状态,以防发生错误。

    基本使用:

    let 

    localForage

    https://github.com/localForage/localForage

    这个简单而快速的库将通过IndexedDB或WebSQL使用异步存储来改善Web的脱机体验。它类似于localStorage,但具有回调功能。

    基本使用:

    localforage

    很神奇的是它提供中文文档

    http://crypt.io

    https://github.com/jas-/crypt.io

    http://crypt.io使用标准JavaScript加密库实现安全的浏览器存储。使用http://crypto.io时,有三个存储选项:sessionStorage,localStorage或cookie。

    基本使用:

    let 

    你还知道其他本地存储库吗?为什么使用它?在下面的评论中让我知道!


    原文:https://medium.com/javascript-in-plain-english

    作者:Amy J. Andrews

    翻译:公众号《前端全栈开发者》

    展开全文
  • 本地存储就是指在浏览器中存储数据,是相对于服务器中存储数据来说的。1. 本地存储的分类浏览器的本地存储主要包括4种方式:Cookie、Storage、SQL数据库和IndexedDB。CookieCookie提出来得最早,其最初的设计目的...

    本地存储就是指在浏览器中存储数据,是相对于服务器中存储数据来说的。

    1. 本地存储的分类

    浏览器的本地存储主要包括4种方式:Cookie、Storage、SQL数据库和IndexedDB。

    Cookie

    Cookie提出来得最早,其最初的设计目的只是为了保存用户的登录信息,所以并不适合保存大量数据。Cookie容量小,将保存的数据拼接成字符串的形式跟程序进行操作。没打开一个网址,浏览器都会将该网站下的所有Cookie数据全部传到服务器端,因为其最初的设计目的只是用来保护用户的登录信息(例如SessionId)。

    Storage

    Sotrage是HTML5中用于存储本地数据的对象,因为其设计目的就是存储本地数据,所以其操作比Cookie灵活得多。Storage容量比Cookie大,可以直接按照键值对存储数据并使用键名获取数据。Storage分为sessionStorage和localStorage,前者在浏览器关闭后就会被清除,后者会一直存储在浏览器中,除非人为或代码清除。

    SQL数据库

    SQL数据库在浏览器中封装了一个小型的SQLLite数据库,但是从前端架构上并不适合使用。例如:JS对象的属性随时都可能发生改变,可能增删,也可能修改数据类型,但是SQL数据库要求在对数据操作之前就先确定好数据的结构。

    IndexedDB

    IndexedDB属于一种noSQL数据库,是非结构化的,它所保存的数据记录跟JS的对象一样可以随时变化属性(字段)。与Storage相比,它可以保存更多的数据,而且还可以使用数据库的索引、事务等相关概念,但是使用起来要比Storage复杂不少。

    2. Storage存储

    Storage是window对象的一个function类型的属性对象,但是这个function对象比较特别,它既不可以当作方法来执行,也不可以用来创建实例对象,JS引擎会默认为创建两个Storage的实例对象,直接调用就可以了。JS引擎创建的两个Storage实例对象分别是sessionStorage和localStorage,前者用于暂时保存,浏览器关闭后数据就会丢失;后者用于长久保存,及时关闭浏览器数据也不会丢失。Storage.prototype: 51b73ccf2d73f7d482133d6c5b0a674a.png 操作数据的方法有:

    • getItem(key)

    • setItem(key, value)

    • removeItem(key)

    • clear()

    在控制台利用session storage setItem设置一个值后可以在Application的Session Storage查看: aef6bc29ea0a42e67f887f2d2b841d91.png cfc0b820e56a4435bd109f7abe363e85.png

    localStorage与sessionStorage在方法上使用相同,不同之处就在存储后数据清除方式不同。

    3. StorageEvent

    Storage实例对象修改数据的时候会触发一个StorageEvent事件,这个事件有些特别,当事件触发后,消息会发送到打开的所有当前网站的其他页面中(当然要在同一个浏览器中),至于是否会发送给当前页面,不同的浏览器有不不同的处理方法。(个人测试以下几个浏览器行为均相同,不发送给当前页面:谷歌浏览器(85.0.4183.83)、(Microsoft Edge 44.18362.449.0)、Firefox(78.0.2 (64 位))、双核浏览器(版本 1.0.4.2)) StorageEvent.prototype: ecfabf3cd0f965319f6dfcdfb4181071.png

    代码示例:

    lang="en">

    charset="UTF-8">

    name="viewport" content="width=device-width, initial-scale=1.0">

    Document

    value="Test Storage" type="button" id='button'/>

    const btn = document.querySelector('#button');

    btn.onclick = () => {

    localStorage.setItem('testKey', 'testValue1');

    }

    window.addEventListener('storage', function(e){

    console.log(`key: ${e.key}`);

    console.log(`oldValue: ${e.oldValue}`);

    console.log(`newValue: ${e.newValue}`);

    console.log(`url: ${e.url}`);

    console.log(`is localStorage: ${e.storageArea === localStorage}`);

    });

    e28d940d73955fe7902b55a2806a7e7a.png

    4. IndexedDB 数据库简介

    IndexedDB数据库是一种noSQL数据库,但是其所用到的概念大部分跟SQL数据库类似,当然也存在不完全相同的地方。不同之处仅在于IndexedDB数据库不是将对象转换为记录,然后再保存到表里面,而是直接保存的对象,它是通过“ID->数据对象”这种模式来保存的。

    IndexedDB数据库操作

    跟IndexedDB数据库相关的对象主要包括11个对象:IDBFactory、IDBDatabase、IDBObjectStore、IDBIndex、IDBKeyRange、IDBCursor、IDBCursorWithValue、IDBTransaction、IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。这11个对象都是window的function类型的属性对象,使用时都使用其示例,但不需要用户自己使用new来创建,在需要的时候就可以自动获取。11个对象可以分为4类:数据库和ObjecStore相关对象、数据相关对象、查询相关对象和辅助对象。气筒辅助对象包括IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。

    数据库和ObjectStore相关操作
    1. 创建/打开数据库 IndexedDB数据库的操作是基于事件的,或者说是异步处理的。open方法返回的是一个IDBOpenDBRequest的实力对象,常用属性有onsuccess、onerror、onupgradeneeded,分别表示打开成功、打开失败和数据库版本升级。

    语法:

    const db_worker = indexedDB.open('dbName', dbVersion);

    示例:

    const workerDBRequest = indexedDB.open('database', 1);

    workerDBRequest.onerror = function(event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onsuccess = function(event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开成功');

    }

    3b473625fb90b28eeaf7614c1d119bd8.png 0589d57dccbaa4d69e014bcf7a4906bd.png 8015f88f57d0a5d962945606281bb612.png

    1. 创建ObjectStore 通过上图,我们可以看出, indexedDB.open(),返回的是一个IDBOpenDBRequest对象,IDBOpenDBRequest的result是一个IDBDatabase对象,有了这个对象,就可以创建ObjectStore了。这个result包含的属性方法如下: 29842261122dcc91c2b2b5513d0a596f.png createObjectStore、deleteObjectStore分别用于创建和删除ObjectStore。

    注意:createObjectStore、deleteObjectStore只能在onupgradeneeded方法中执行。

    createObjectStore方法有两个参数,第一个参数是所要创建的ObjectSore的名字,第二个参数是一个对象,用于描述ID,该对象可以有两个属性:keyPath和autoIncrement,前者用来指定一个对象中的属性用作ID,后者若为true则会在保存数据时用Generator生成一个ID,但是这里需要自己创建一个Generator。示例如下:

    const workerDBRequest = indexedDB.open('worker', 2);

    workerDBRequest.onerror = function(event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onsuccess = function(event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开数据库成功');

    }

    workerDBRequest.onupgradeneeded = function(e) {

    var db = workerDBRequest.result;

    db.createObjectStore('category', {});

    console.log(`${db.name} 的版本号修改为了${db.version}`);

    }

    数据操作相关

    数据相关操作除了前面介绍的之外,主要还要用到表示事务的IDBTransaction对象。数据库(IDBDatabse的实例对象)的绝大多数操作都需要用事务来完成,数据库实例对象包含一个transaction方法属性(其实是IDBDatabase.prototype的属性),调用该属性方法就可以创建事务。transaction方法有两个参数,第一个参数用于指定要操作的ObjectStore,可以是一个,也可以是多个,多个采用数组传递;第二个参数指定事务的类型,可以是readonly(默认)或者readwrite,分别表示创建只读或读写事务。

    IDBTransaction实例所包含的属性:

    ["objectStoreNames", "mode", "db", "error", "onabort", "oncomplete", "onerror", "objectStore", "commit", "abort", "durability", "constructor"] 7ffd582b392f21efe82be0481e1aad34.png

    IDBObjectStore实例包含的属性:

    ["name", "keyPath", "indexNames", "transaction", "autoIncrement", "put", "add", "delete", "clear", "get", "getKey", "getAll", "getAllKeys", "count", "openCursor", "openKeyCursor", "index", "createIndex", "deleteIndex", "constructor"] bec89a8c7f09ec05c9e3703fa7d1ba59.png

    增加数据

    示例:

    const workerDBRequest = indexedDB.open('worker', 3);

    workerDBRequest.onerror = function(event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onupgradeneeded = function(e) {

    var db = workerDBRequest.result;

    db.createObjectStore('category', {keyPath: 'id'});

    console.log(`${db.name} 的版本号修改为了${db.version}`);

    }

    workerDBRequest.onsuccess = function(event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开数据库成功');

    workerDBOpenSuccess();

    }

    function workerDBOpenSuccess() {

    const tx_category = db_worker.transaction('category', 'readwrite');

    const store_category = tx_category.objectStore('category');

    const category1 = {'id':007, 'name':'zzh', 'age':18};

    const categoryAddRequest = store_category.add(category1);

    categoryAddRequest.onsuccess = function(event) {

    console.log('保存成功');

    }

    categoryAddRequest.onerror = function(evevt) {

    console.log('保存失败');

    }

    }

    6dcc7f184ec1af5641a68d6ca480460f.png

    查询数据

    实例:

    const workerDBRequest = indexedDB.open('worker', 3);

    workerDBRequest.onerror = function(event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onupgradeneeded = function(e) {

    var db = workerDBRequest.result;

    db.createObjectStore('category', {keyPath: 'id'});

    console.log(`${db.name} 的版本号修改为了${db.version}`);

    }

    workerDBRequest.onsuccess = function(event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开数据库成功');

    workerDBOpenSuccess();

    }

    function workerDBOpenSuccess() {

    const tx_category = db_worker.transaction('category', 'readwrite');

    const store_category = tx_category.objectStore('category');

    const categoryGetRequest = store_category.get(7);

    categoryGetRequest.onsuccess = function (event) {

    console.log(`查询成功: ${JSON.stringify(categoryGetRequest.result)}`);

    }

    }

    3f34495a7d75d41a3a6c702acf19ec9d.png 查询的方式还有很多种,就像关系型数据库一样,查询可以根据不同的条件筛选数据。

    修改数据

    const workerDBRequest = indexedDB.open('worker', 3);

    workerDBRequest.onerror = function (event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onupgradeneeded = function (e) {

    var db = workerDBRequest.result;

    db.createObjectStore('category', {

    keyPath: 'id'

    });

    console.log(`${db.name} 的版本号修改为了${db.version}`);

    }

    workerDBRequest.onsuccess = function (event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开数据库成功');

    workerDBOpenSuccess();

    }

    function workerDBOpenSuccess() {

    const tx_category = db_worker.transaction('category', 'readwrite');

    const store_category = tx_category.objectStore('category');

    const categoryGetRequest = store_category.get(7);

    categoryGetRequest.onsuccess = function (event) {

    console.log(`查询成功: ${JSON.stringify(categoryGetRequest.result)}`);

    let data = event.target.result;

    data.age = 19;

    const categoryPutRequest = store_category.put(data);

    categoryPutRequest.onsuccess = function (event) {

    console.log('更新成功');

    }

    }

    }

    2e160b38905171139d35277f3e5f3865.png IndexedDB可能不会实时更新显示,有时需要刷新后查看,实际值已经修改。 cbf5dcb6f7aadb9261f1bd48e7ad9441.png

    删除数据

    示例:

    const workerDBRequest = indexedDB.open('worker', 3);

    workerDBRequest.onerror = function (event) {

    console.log('打开数据库失败');

    }

    workerDBRequest.onupgradeneeded = function (e) {

    var db = workerDBRequest.result;

    db.createObjectStore('category', {

    keyPath: 'id'

    });

    console.log(`${db.name} 的版本号修改为了${db.version}`);

    }

    workerDBRequest.onsuccess = function (event) {

    db_worker = workerDBRequest.result; // 也可以使用event.target.result

    console.log('打开数据库成功');

    workerDBOpenSuccess();

    }

    function workerDBOpenSuccess() {

    const tx_category = db_worker.transaction('category', 'readwrite');

    const store_category = tx_category.objectStore('category');

    const categoryDeleteRequest = store_category.delete(7); // 根据id删除

    categoryDeleteRequest.onsuccess = function(event) {

    console.log('删除成功');

    }

    }

    显示需要刷新后查看。 9a7000983065f4924d83c6a32e26e769.png

    IndexedDB的操作还有很多,首先大概理解下noSQL的原理,然后再对这些对象,以及对象可进行的操作进行理解使用。感兴趣的也可以参看MDN详解:https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDBAPI/UsingIndexedDB

    46a3a56f479a2d49b26abc8162bf77aa.png

    扫二维码|添加微信

    7fafc3975c3f1632123c5f8d1e61f547.png

    扫码关注

    微信号|iotzzh

    公众号|前端微说

    展开全文
  • 首先计算机存储数据的方式分为外存(硬盘)和内存两种方式,内存中的数据一断电就会被清空,但硬盘是不会的,所以计算机调取数据是从内存中调取,因为它速度更快,而内存中的数据从外存中调取,所以这让我们的计算机...

    首先计算机存储数据的方式分为外存(硬盘)和内存两种方式,内存中的数据一断电就会被清空,但硬盘是不会的,所以计算机调取数据是从内存中调取,因为它速度更快,而内存中的数据从外存中调取,所以这让我们的计算机系统化,各尽其职,当然外存在当今来说您可以选择ssd去提升自己电脑的性能,这样内存在调去数据的时候会更快,cpu也会更快的获取到数据去处理它

    上面说了这么多也是介绍下计算机的存储环境,那回归正题,js作为一个脚本语言,它在内存中是怎样存储我们的数据呢?

    在js中数据类型有7种,但是它们按构造来分,分为两种,1.简单类型 2.复杂类型。

    首先内存中分为两块区域一块叫栈,一块叫堆,那么像简单数据类型是直接存在栈空间里面的,例如

    var a = 1
    var b = a

    这里'1'是数值类型,这时会在栈上开辟一个空间 用来去存储它,那a就是用来调用他的名字。

    b = a,这时,又会在栈上开辟一个空间,这里面存着跟a一样的值'1',但它的名字为b,所以到这时内存中现在有两个空间,分别存储着数值'1',一个是空间为a,一个是空间为b,如果这时

    b = 2,会在先找到b的空间,把1替换成2,那其实对a是没有任何影响的,

    当然在数值类型是这样,内存存储字符串就又不一样了,例如:

    var str = 'abc'
    var str2 = str

    这段代码和数值类型一样,先在栈上开辟空间,存对应的字符串。

    str2 = 'abcd'

    但是这时就不是直接去改之前存储的数据了,而是另开辟一个空间去存新的字符串,然后变量名指向新的空间,因为之前的空间没有名字来调去使用了,所以浏览器会将其删除。这也是为什么当存储的字符串较多时,处理速度会慢的原因,这也是字符串的不可改变性。

    undefined 和 null 就是在栈上开辟空间存上undefined 和 null

    而身为复杂类型的对象(object)就和上不同了,

    var obj = {
        name:'zs'
        age: 18
    }

    这里obj就是一个对象,它存在堆中,而栈存的是找到这个obj对象的地址,如图:

    10d55555da128952252e5fef70156158.png
    object在内存中的存储
    var obj2 = obj

    这时只是将obj的的地址赋值给obj2,地址还是指向同一个对象,如图:

    31e7eae0e3012a7943c4451a1694d552.png
    obj2 = {
         name: 'ls'
         age: 18
    }

    这时obj2会在堆中再开辟一个新空间去存储新的对象,而不是改变obj对象

    17e9c222183c24072059cfac2f46c01d.png
    obj2.name = 'ls'
    console.log(obj.name) // ls

    因为obj2 和obj1存储着同样的地址,这时通过地址找到了对象的name属性 将其值改变成了ls

    那么打印的obj对象的name也就为'ls' 这也是JS中的 深拷贝现象

    当然在不光只有属性对象中还有方法,方法就又对应一个对象,类似一颗树的结构,例如这样:

    5b9079c4fbaf2759e176697101ba6843.png

    如果当一个对象已经没有被引用了,那么会被当做垃圾被回收

    展开全文
  • 前言随着移动网络的发展与演化,我们手机上现在除了有原生App,还能跑“WebApp”——它即开即...cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代,本文将介绍这几种存储方式的差异和...

    前言

    随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点。

    一、Cookie

    1.Cookie的来源

    Cookie 的本职工作并非本地存储,而是“维持状态”。因为HTTP协议是无状态的,HTTP协议自身不对请求和响应之间的通信状态进行保存,通俗来说,服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时,由于HTTP的无状态性,不通过额外的手段,服务器并不知道用户到底买了什么,于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息,借此维护用户跟服务器会话中的状态。

    我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件,它附着在 HTTP 请求上,在浏览器和服务器之间“飞来飞去”。它可以携带用户信息,当服务器检查 Cookie 的时候,便可以获取到客户端的状态。

    在刚才的购物场景中,当用户选购了第一项商品,服务器在向用户发送网页的同时,还发送了一段Cookie,记录着那项商品的信息。当用户访问另一个页面,浏览器会把Cookie发送给服务器,于是服务器知道他之前选购了什么。用户继续选购饮料,服务器就在原来那段Cookie里追加新的商品信息。结帐时,服务器读取发送来的Cookie就行了。

    2.什么是Cookie及应用场景

    Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成,客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端,就可以进行客户端状态的维护,比如登陆后刷新,请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值,根据cookie值的内容就可以判断和恢复一些用户的信息状态。

    107edead1f055f739765e5b3d6d0b79b.png

    如上图所示,Cookie 以键值对的形式存在

    典型的应用场景有:

    • 记住密码,下次自动登录。

    • 购物车功能。

    • 记录用户浏览数据,进行商品(广告)推荐。

    3.Cookie的原理及生成方式

    Cookie的原理

    59e4e96f147323b4ac2b0046a1b7ca73.png

    第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会在响应头里面添加一个Set-Cookie选项,将cookie放入到响应请求中,在浏览器第二次发请求的时候,会通过Cookie请求头部将Cookie信息发送给服务器,服务端会辨别用户身份,另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

    Cookie的生成方式主要有两种:

    • 生成方式一:http response header中的set-cookie

    我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。默认情况下,domain 被设置为设置 Cookie 页面的主机名,我们也可以手动设置 domain 的值。

    Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2018 07:28:00 GMT;//可以指定一个特定的过期时间(Expires)或有效期(Max-Age)

    当Cookie的过期时间被设定时,设定的日期和时间只与客户端相关,而不是服务端。

    • 生成方式二:js中可以通过document.cookie可以读写cookie,以键值对的形式展示

    例如我们在掘金社区控制台输入以下三句代码,便可以在Chrome 的 Application 面板查看生成的cookie:

    document.cookie="userName=hello"

    document.cookie="gender=male"

    document.cookie='age=20;domain=.baidu.com'

    4f3d47426b8f8cf0a1f28241f33d589d.png

    从上图中我们可以得出:

    Domain 标识指定了哪些域名可以接受Cookie。如果没有设置domain,就会自动绑定到执行语句的当前域。如果设置为”.baidu.com”,则所有以”baidu.com”结尾的域名都可以访问该Cookie,所以在掘金社区上读取不到第三条代码存储Cookie值。

    4.Cookie的缺陷

    • Cookie 不够大

    Cookie的大小限制在4KB左右,对于复杂的存储需求来说是不够用的。当 Cookie 超过 4KB 时,它将面临被裁切的命运。这样看来,Cookie 只能用来存取少量的信息。此外很多浏览器对一个站点的cookie个数也是有限制的。

    这里需注意:各浏览器的cookie每一个 name=value的value值大概在4k,所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。

    • 过多的 Cookie 会带来巨大的性能浪费

    Cookie 是紧跟域名的。同一个域名下的所有请求,都会携带 Cookie。大家试想,如果我们此刻仅仅是请求一张图片或者一个 CSS 文件,我们也要携带一个 Cookie 跑来跑去(关键是 Cookie 里存储的信息并不需要),这是一件多么劳民伤财的事情。Cookie 虽然小,请求却可以有很多,随着请求的叠加,这样的不必要的 Cookie 带来的开销将是无法想象的。

    cookie是用来维护用户信息的,而域名(domain)下所有请求都会携带cookie,但对于静态文件的请求,携带cookie信息根本没有用,此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决。

    • 由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题,除非用HTTPS。

    5.Cookie与安全

    对于 cookie 来说,我们还需要注意安全性。9bd28da4c232cf7270129b6829cd62bf.png

    HttpOnly 不支持读写,浏览器不允许脚本操作document.cookie去更改cookie, 所以为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用,那么就应该为其设置 HttpOnly 标记。

    Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

    标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记,敏感信息也不应该通过Cookie传输,因为Cookie有其固有的不安全性,Secure 标记也无法提供确实的安全保障。

    为了弥补 Cookie 的局限性,让“专业的人做专业的事情”,Web Storage 出现了。

    HTML5中新增了本地存储的解决方案----Web Storage,它分成两类:sessionStorage和localStorage。这样有了WebStorage后,cookie能只做它应该做的事情了——作为客户端与服务器交互的通道,保持客户端状态。

    二、LocalStorage

    1.LocalStorage的特点

    • 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。

    • 大小为5M左右

    • 仅在客户端使用,不和服务端进行通信

    • 接口封装较好

    基于上面的特点,LocalStorage可以作为浏览器本地缓存方案,用来提升网页首屏渲染速度(根据第一请求返回时,将一些不变信息直接存储在本地)。

    2.存入/读取数据

    localStorage保存的数据,以“键值对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据。 localStorage.setItem("key","value");读取数据使用getItem方法。它只有一个参数,就是键名。 varvalueLocal=localStorage.getItem("key");

    具体步骤,请看下面的例子:

    if(window.localStorage){

    localStorage.setItem('name','world')

    localStorage.setItem(“gender','famale')

    }

    id="name">

    id="gender">

    var name=localStorage.getItem('name')

    var gender=localStorage.getItem('gender')

    document.getElementById('name').innerHTML=name

    document.getElementById('gender').innerHTML=gender

    3.使用场景

    LocalStorage在存储方面没有什么特别的限制,理论上 Cookie 无法胜任的、可以用简单的键值对来存取的数据存储任务,都可以交给 LocalStorage 来做。

    这里给大家举个例子,考虑到 LocalStorage 的特点之一是持久,有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串:

    80d158059d688d48c9a983e6b2209d61.png

    三、sessionStorage

    sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;sessionStorage 特别的一点在于,即便是相同域名下的两个页面,只要它们不在同一个浏览器窗口中打开,那么它们的 sessionStorage 内容便无法共享;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同,SessionStorage的属性和方法与LocalStorage完全一样。

    1.sessionStorage的特点

    • 会话级别的浏览器存储

    • 大小为5M左右

    • 仅在客户端使用,不和服务端进行通信

    • 接口封装较好

    基于上面的特点,sessionStorage 可以有效对表单信息进行维护,比如刷新时,表单信息不丢失。

    2.使用场景

    sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话,当你开启新的会话时,它也需要相应的更新或释放。比如微博的 sessionStorage就主要是存储你本次会话的浏览足迹:

    10fd8095f88ddb8db7eab081cbc7cff8.png

    lasturl 对应的就是你上一次访问的 URL 地址,这个地址是即时的。当你切换 URL 时,它随之更新,当你关闭页面时,留着它也确实没有什么意义了,干脆释放吧。这样的数据用 sessionStorage 来处理再合适不过。

    3.sessionStorage 、localStorage 和 cookie 之间的区别

    • 共同点:都是保存在浏览器端,且都遵循同源策略。

    • 不同点:在于生命周期与作用域的不同

    作用域:localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下

    205d9cb70a4a6ed45011273a8467301e.png

    生命周期:localStorage 是持久化的本地存储,存储在其中的数据是永远不会过期的,使其消失的唯一办法是手动删除;而 sessionStorage 是临时性的本地存储,它是会话级别的存储,当会话结束(页面被关闭)时,存储内容也随之被释放。

    Web Storage 是一个从定义到使用都非常简单的东西。它使用键值对的形式进行存储,这种模式有点类似于对象,却甚至连对象都不是——它只能存储字符串,要想得到对象,我们还需要先对字符串进行一轮解析。

    说到底,Web Storage 是对 Cookie 的拓展,它只能用于存储少量的简单数据。当遇到大规模的、结构复杂的数据时,Web Storage 也爱莫能助了。这时候我们就要清楚我们的终极大 boss——IndexedDB!

    四、IndexedDB

    IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是 5M、10M 这样小打小闹级别了。理论上来说,IndexedDB 是没有存储上限的(一般来说不会小于 250M)。它不仅可以存储字符串,还可以存储二进制数据。

    1.IndexedDB的特点

    • 键值对储存。

    IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。

    • 异步

    IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

    • 支持事务。

    IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

    • 同源限制

    IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

    • 储存空间大

    IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

    • 支持二进制储存。

    IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

    2.IndexedDB的常见操作

    在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式。

    • 建立打开IndexedDB ---- window.indexedDB.open("testDB")

    这条指令并不会返回一个DB对象的句柄,我们得到的是一个 IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中

    c1d17040e62cce7a4f4cece952759334.png

    除了result,IDBOpenDBRequest接口定义了几个重要属性:

    onerror: 请求失败的回调函数句柄

    onsuccess:请求成功的回调函数句柄

    onupgradeneeded:请求数据库版本变化句柄

    function openDB(name){

    var request=window.indexedDB.open(name)//建立打开IndexedDB

    request.onerror=function (e){

    console.log('open indexdb error')

    }

    request.onsuccess=function (e){

    myDB.db=e.target.result//这是一个 IDBDatabase对象,这就是IndexedDB对象

    console.log(myDB.db)//此处就可以获取到db实例

    }

    }

    var myDB={

    name:'testDB',

    version:'1',

    db:null

    }

    openDB(myDB.name)

    控制台得到一个 IDBDatabase对象,这就是IndexedDB对象

    125e2fbc33e174738519f897d54e45ab.png

    • 关闭IndexedDB---- indexdb.close()

    function closeDB(db){

    db.close();

    }

    • 删除IndexedDB---- window.indexedDB.deleteDatabase(indexdb)

    function deleteDB(name) {

    indexedDB.deleteDatabase(name)

    }

    3.WebStorage、cookie 和 IndexedDB之间的区别

    d8d1ad125255b10946cb915e63183eba.png从上表可以看到,cookie 已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。

    总结

    正是浏览器存储、缓存技术的出现和发展,为我们的前端应用带来了无限的转机。近年来基于存储、缓存技术的第三方库层出不绝,此外还衍生出了 PWA 这样优秀的 Web 应用模型。总结下本文几个核心观点:

    • Cookie 的本职工作并非本地存储,而是“维持状态”

    • Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制,不与服务端发生通信

    • IndexedDB 用于客户端存储大量结构化数据

    参考文章

    • 把cookie聊清楚

    • HTML5本地存储——IndexedDB(一:基本使用)

    • 详说 Cookie, LocalStorage 与 SessionStorage

    • 前端性能优化原理与实践

    • localstorage 必知必会

    • 浏览器数据库 IndexedDB 入门教程

    -更多文章-

    你的接口,真的能承受高并发吗?

    微服务架构之「 服务注册 」

    你知道Java的四种引用类型吗?

    企业微服务中台落地实践和思想之我见

    支付宝架构师眼中的高并发架构

    -关注我-

    b1e24c318f3fab4d20884d5ab75f586c.png

    感谢搓一下“在看838b00e9e8d43eb15494dfd81ee10576.png

    展开全文
  • WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User ...有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念?Cookie肿么了cookie的缺陷是非常明显的1. ...
  • ❝ 本文介绍一些与前端数据存储有关,「有趣、好玩、有用」 的开源库。除此之外,还会让你掌握各种 Web 存储方案的特点,赶紧来了解一下。 ❞在介绍目前比较流行的一些开源的前端存储方案之前,阿宝哥先分享一些与...
  • Web Storage API 支持的两种本地存储机制分别是上述的 localStorage 和 sessionStorage。既然同为本地存储的两种机制,自然既有相同又有不同之处。相同点(存储内容,存储操作):1、都只能以字符...
  • sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面, localstorage和cookie在所有同源窗口中共享 本地大容量存储之WebSql: 表保存数据,用sql操作数据库(写的是sql语句,懂mysql数据库的完全不在话下) ...
  • 一、安装Tomcat Tomcat是一种比较流行的Web应用服务器,它属于轻量级应用...一、获取ArcGIS API for JavaScript的开发包 到官网下载ArcGIS API for JavaScript的开发包,地址为:Sign In | ArcGIS for Develope...
  • (此文介绍的是我遇到过的,极其奇葩的,丢失onenote本地笔记的惨痛经历。不论是否具有普遍性,对进一步理解缓存还是很有帮助的。大家若有其他丢失经历,可以交流。)对于onenote本地笔记本而言,由于其自动保存时间...
  • 原创:Alex Potsides原文链接:https://blog.ipfs.io/2020-09-14-js-ipfs-0-50/由红岸智能编译亮点在多个选项卡和密码文件之间...我们还将逐步淘汰使用Node.js缓冲区作为数据类型,而使用标准JavaScript Uint8Arrays...
  • 首先将通信的模型列举出来, 分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父路径页面通信通信的方式localStorage 本地存储globalData 全局对象eventBus 发布订阅PageModel 缓存整个pageModel至...
  • last_seen = db.Column(db.DateTime, default=datetime.utcnow) # 服务器存储 utc时间1)原始(服务器存储){{ user.last_seen }}2)由moment.js 按客户端时区格式化第一步转换成客户端时区,比如数值上东8区要+8...
  • Andrews我为当前项目测试了一些本地存储库。想知道他们有什么很棒的功能吗?继续阅读。Local Storage Bridgehttps://github.com/krasimir/lsbridge如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,...
  • 利用原生js手撕本地存储实现 存储、获取、删除、清空功能。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <...
  • 点击右上方红色按钮关注“web秀”,让你真正秀起来前言在第一章中,我们的Todo List已经初现锥形,本章节我们对页面优化,同时让数据实现本地存储。主要用到localStorage + Vuex来实现页面交互和存储功能。本次...
  • 1,window.onunload=function(){ 执行清理本地 localStorage.removeItem("xxx") } 2, 使用vue的生命周期结束函数(使用脚手架才会生效),普通html页面关闭不会生效
  • 编写脚本如下 保存脚本并打开开关,清空cookie后重新刷新页面,成功断下,且值已经生成了 往上跟踪堆栈,发现其为ABC类的z方法生成,传入的实参为seed、ts 这两个值都在上面生成,因此我们在上面打下断点,清空...
  • 实时输出前端源代码,折腾大半年的开源项目sparrow-js,尝试下!前言sparrow-js第一次提交到git是在2019-12,转眼将近一年时间,一直在坚持更新,唯一目标就是提升前端研发效率,几年前在市场加速数字化的背景下开始...
  • 1)在你的Node.js应用程序中实现缓存通过这篇简短的介绍性文章,我想提到如何使用Redis在Node.js应用程序中实现缓存,以及我们的应用程序如何从性能中受益。2)什么是缓存及其对我们有何帮助?简而言之,我们可以说...
  • 首先,用Vuex插件添加超级酷特性是非常容易的。Vuex社区的开发人员已经为您创建了大量的免费插件供您使用,您可以想象到许多功能,还有一些您可能...1.Persisting Statevuexpersistedstate使用浏览器的本地存储空间...
  • 是否有任何方法可以重置/清除浏览器在javascript中的本地存储?使用此项清除本地存储:localStorage.clear();如果应用程序在之后重新启动,它仍然存在…@半烤一点也不。也许你的应用程序又重新设置了?当我的应用...
  • //基于localStorage本地存储 var store={ set:function(name, value, day) { // 设置 let d = new Date() let time = 0 day = (typeof(day) === 'undefined' || !day) ? 1 : day // 时间,默认存储1天 time = d....
  • //给本地存储赋值,同样转换为字符串类型,同时把newAr从对象转换为数组 localStorage.setItem("searchList", JSON.stringify(Array.from(newArr))); //路径如果没有变化,则退出,不跳转页面——如果搜索时input框...
  • 删除本地存储

    千次阅读 2020-03-22 15:42:57
    删除本地指定存储 废话不多说,上 sessionStorage.removeItem('你那个叫的名字') //localStorage也都一样 删除本地所有存储 localStorage.clear(); // sessionStorage也一样 ...
  • js本地存储

    2021-03-29 16:34:17
    js本地存储的方式 javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除; setItem(key,value) 设置...
  • 存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="del">清空所有数据</button> &l..
  • webStorage (Window.sessionStorage和...2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 3.相关API: 1.```xxxxxStorage.setItem('key','value');``` 该方法接受一个键...
  • 苹果 WebKit 博客分享了智能跟踪预防技术(ITP)的最新进展:完全屏蔽第三方 Cookie,七天清空本地存储,简化开发人员工作。但也有开发者唱起了反调,觉得苹果只是说起来冠冕堂皇,实际上还是为了商业考虑。Why?苹果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,173
精华内容 6,869
关键字:

js清空本地存储