什么是内存?
在硬件级别上,计算机内存由大量触发器组成。每个触发器包含几个晶体管,能够存储一个位。单个触发器可以通过唯一标识符寻址,因此我们可以读取和覆盖它们。因此,从概念上讲,我们可以把我们的整个计算机内存看作是一个巨大的位数组,我们可以读和写。
但是!Javascript具有自动垃圾收集机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。而在 C 和 C++ 之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况,这是造成许多问题的一个根源。
然鹅这并不是我们不关心内存使用问题的理由!一名前端开发工程师了解JavaScript内存机制有助于清晰的认识到自己的代码在执行过程中发生过什么,从而写出性能更加优秀的代码。
本地存储的几种方案
首先进行一个简单的对比
Cookies:浏览器均支持,容量为4KB
LocalStorage:HTML5,容量为5M
SessionStorage:HTML5,容量为5M
UserData:仅IE支持,容量为64KB
Flash:100KB,非HTML原生,需要插件支持
Google Gear SQLite:需要插件支持,容量无限制
globalStorage:Firefox独有的,Firefox13开始不再支持这个方法
下面进行细致的整理
1.Cookie
cookie的内容主要包括:
名字
,
值
,
过期时间
,
路径和域
。
路径
与
域
一起构成cookie的
作用范围
。
若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为
会话cookie
。
会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。
Cookie 的特点
cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。
只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供document.cookie这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()来设置cookie,通过$_COOKIE这个超全局数组来获取cookie。
1.2 Cookie实战
function getCookie(c_name){
if(document.cookie.length > 0){
c_star=document.cookie.indexOf(c_name + "=");
if(c_star!=-1){
c_start=c_start+c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.subtring(c_start,c_end))
return " ";
function setCookie(c_name,value,expiredays){
var exdata=new Date();
exdata.setDate(exdata.getData()+expireadays)
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":"; expires"+exdata.toUTCString());
function checkCookie(){
username=getCookie('username');
if(username!=null && username!=""){
alert('Welcome again' + username +'!')
else{
username!=prompt('Please enter your name:',"")
if(username!=null && username!=""){
setCookie('username',username,355)
复制代码
2.localStorage
这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。
属性方法:
localStorage.length
获得storage中的个数
localStorage.key(n)
获得storage中第n个元素对的键值(第一个元素是0)
localStorage.getItem(key)
获取键值key对应的值
localStorage.key
获取键值key对应的值
localStorage.setItem(key, value)
添加数据,键值为key,值为value
localStorage.removeItem(key)
移除键值为key的数据
localStorage.clear()
清除所有数据
localStorage大小限制在500万字符左右,各个浏览器不一致
localStorage在隐私模式下不可读取
localStorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
localStorage不能被爬虫爬取,不要用它完全取代URL传参
3.sessionStorage
和服务器端使用的session类似,是一种会话级别的缓存,关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的,也就是说不同窗口间的sessionStorage数据不能共享的。使用方法(和localStorage完全相同):
属性方法:
sessionStorage.length 获得storage中的个数
sessionStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage.getItem(key) 获取键值key对应的值 >
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value) 添加数据,键值为key,值为value
sessionStorage.removeItem(key) 移除键值为key的数据
sessionStorage.clear() 清除所有数据
session 机制
session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。
当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。
保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止,则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。
经常被使用的一种技术叫做URL重写,就是把session id直接附加在URL路径的后面。比如:
damonare.cn?sessionid=123456
还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单,添加一个隐藏字段,以便在表单提交时能够把session id传递回服务器。比如:
<form name="testform" action="/xxx">
<input type="hidden" name="sessionid" value="123456">
<input type="text">
</form>
参考文章:Javascript本地存储小结