简单介绍浏览器端的几种存储技术

el/2024/2/25 23:26:59

这个问题经常会被问到,在这里简单总结一下~

1、Cookie

cookie是什么:cookie是指存储在用户本地终端上的数据,同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把保存在该请求域名下的所有cookie值发送给web服务器,因此服务器端脚本是可以读、写存储在客户端的cookie的操作。

cookie的有效期:cookie默认情况下的有效期是很短暂的,一旦用户关闭浏览器,cookie保存的数据就会丢失。如果想要延长cookie的有效期,可以通过设置HTTP头信息中的cache-control属性的max-age值,或者修改HTTP头信息中的expires属性的值来延长有效期。

cookie的作用域:它是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下,cookie和创建它的web页面有关,并对该页面以及和该页面同目录或者子目录的其他页面可见。有时候,你可能希望让整个网站都能够使用cookie的值,而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是,有的大型网站想要子域之间能够互相共享cookie。

cookie的数目和大小的限制:每个web服务器(域名)保存的cookie数不能超过50个,每个cookie保存的数据不能超过4KB,如果超过了4KB(IE6大约只能存储2K),服务器会处理不了。

cookie的优点:能用于和服务器端通信;当cookie快要过期时,可以重新设置而不是删除。

cookie的缺点:它会随着http头信息一起发送,增加了网络流量(文档传输的负载);它只能储存少量的数据;它只能储存字符串;有潜在的安全问题。

另外,自从有了Web Storage API(Local and Session Storage),cookie就不被推荐用于存储数据了~

2、LocalStorage

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

localStorage的优点:

1)localStorage拓展了cookie的4K限制;

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

3)localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

localStorage的缺点:

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

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

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

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

5)localStorage不能被爬虫抓取到。

3、SessionStorage

sessionStoragelocalStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对就会被清空。

4、UserData、GlobalStorage、Google Gear

这三种的使用都有一定的局限性,例如userData是IE浏览器专属,它的容量可以达到640K,这种方案可靠,不需要安装额外插件,只不过它仅在IE下有效~

globalStorage适用于Firefox 2+的浏览器,类似于IE的userData~

google gear是谷歌开发出的一种本地存储技术,需要安装Gear组件。

5、Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案。不过,需要在页面中插入一个Flash,当浏览器没有安装Flash控件时就不能用了。所幸的是,没有安装Flash的用户极少。

强调一下:cookie,localStorage和sessionStorage的异同:

共同点:都是保存在浏览器端,且同源的。

区别:

1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;

2)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下;

3)存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识;sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;

4)数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;

5)作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;

6)Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者;Web Storage 的 api 接口使用更方便。



http://www.ngui.cc/el/4893682.html

相关文章

关于HTML中scr与href的区别

一、区别 src用于替换当前元素&#xff0c;而href用于在当前文档和引用资源之间确立联系。 二、关于src 例&#xff1a;<script src "test4.js"></script> src是source的缩写&#xff0c;指向外部资源的位置&#xff0c;指向的内容将会嵌入到文档中…

概念区分:JavaScript中的global对象,window对象以及document对象

1、global对象&#xff08;全局对象&#xff09; 《JS高级程序设计》中谈到&#xff0c;global对象可以说是ECMAScript中对特别的一个对象了&#xff0c;因为不管你从什么角度上看&#xff0c;这个对象都是不存在的。从某种意义上讲&#xff0c;它是一个终极的“兜底儿对象”&…

【C++】拷贝构造函数之浅复制与深复制

拷贝构造函数之浅复制与深复制 拷贝构造函数分为默认拷贝构造函数和自定义拷贝构造函数&#xff0c;默认拷贝构造函数是编译器自动为类对象创建的构造函数&#xff0c;而自定义拷贝构造函数则是根据自己需要创建的函数 特性 默认拷贝构造函数&#xff1a;简单地将参数对象的…

【C++】编程小结① -- new和delete

new 和 delete 使用的疏忽 1.谨记格式&#xff1a;指针所指对象数据类型* 变量名 new 数据类型&#xff08;初始化变量值,可省略&#xff09;&#xff1b; int* val new int;//val 指向一个没有初始化的int型对象&#xff08;int是内置数据类型&#xff0c;不会初始化&#…

【C++】编程小结②-- 字符串定义变量

关于字符串 如果要将字符一个个赋值进一个字符数组中并最后要用字符串的形式输出整个字符串&#xff0c;则需要手动在最后加入“\0”&#xff0c;不然编译器将读取不到结尾导致意想不到的后果。 定义变量的位置问题 c里允许在for循环里定义变量&#xff0c;但这是有局限性的。…

【C++】指向指针的指针int**的深复制的实现

实现指向指针的指针的深复制 如编写一个构造函数初始化一个矩阵。矩阵元素用一个二维数组来表示。 //定义了一个表示矩阵的类 class Matrix { public:Matrix(string name, int height, int width, int** element);~Matrix(); private:string name;int height;int width;int** …

【C++】编程小结③-- string 宏

关于string的“”号的使用 1.可以是两个string对象相加 #include<string> string s1 "abc"; string s2 "efg"; string s3 s1 s2; 2.和字符串字面值连接 当进行string对象和字符串字面值混合连接操作时&#xff0c;操作符的左右操作数必须至少…

【C++】Digest of 《effective C++》--1

《effective C》阅读笔记01 size_t是c计算个数时使用的某种不带正负号&#xff08;unsigned&#xff09;类型。它也是vector&#xff0c;deque和string内的operator[]函数接受的参数类型。分清楚声明式和定义式&#xff0c;对对象而言&#xff0c;定义式是编译器为此对象拨发内…

什么事情,都要去试一试啊

广州&#xff0c;下了一个月的雨&#xff0c;还在持续着超过一个月的阴天。 前段时间经历过一个心情的低谷。感觉自己真的变成了一个抑郁症患者&#xff0c;不想吃东西&#xff0c;不想做事情&#xff0c;对什么都提不起兴趣。那个时候的自己&#xff0c;可能受到各种外界的影…

【C++】标准IO库

本文章根据《C Primer》总结而来 IO类型在三个独立的头文件中定义&#xff1a; iostream定义读写控制窗口的类型fstream定义读写已命名文件的类型sstream定义读写存储在内存中的string对象 IO对象不可复制或赋值 1、只有支持复制的元素类型可以存储在vector或其他容器里&#…