前端储存的种类与方法

发表于 | 更新于 | 分类于 | 阅读次数：

摘要： localStorage、sessionStorage、cookie的用法以及区别

localStorage的优势与用法

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

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到

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

localStorage的写入方法

var storage = window.localStorage

  1. 方法一： 
    storage['name'] = 'dale' //写入name字段
  2. 方法二： 
    storage.info = 'this is a info' // 写入info字段
  3. 方法三： 
    storage.setItem("age", 18) // 写入info字段

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

localStorage的读取方法

  1. 方法一: 
    var name = storage.name 
console.log(name); // 'dale'
  2. 方法二： 
    var info = storage['info']
console.log(info) // 'this is a info'
  3. 方法三： 
    var age = storage.getItem('age')
console.log(age) // '18' 注意这里输出的18是String类型的

localStorage只支持string类型的存储。

localStorage的删除方法

storage.removeItem(‘name’) // 删除key为name的键值

localStorage的清空方法

storage.clear() //清除所有的storage

sessionStorage的用法

sessionStorage的使用方法与localStorage完全相同，唯一的区别是：sessionStorage当会话结束的时候，sessionStorage中的键值对会被清空;
详解：

  1. 当 当前tab关闭，或者浏览器关闭；sessionStorage会被清空；
  2. 复制tab标签时，sessionStorage会被复制，
  3. 重新打开相同域名时tab时，sessionStorage是不会被共享的

cookie概念和使用方法

cookie的基本概念

  • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  • cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
  • 有效期设置：Max-Age
  • 安全secure=true是只在ssl或者https安全协议下传输
  • HttpOnly=true时，禁止通过js脚本获取cookie；防止xss攻击
  • 每个域名下的cookie 的大小最大为4KB，最多20个

cookie的使用

cookie的设置
1
2
3
4
5
6
7
function setCookie(cname,cvalue,exdays)
    {
    var SetTime = new Date();                                         //设置过期时间
    SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //设置过期时间
    var expires = "expires="+SetTime.toGMTString();                   //设置过期时间
    document.cookie = cname + "=" + cvalue + "; " + expires;          //创建一个cookie
    }
cookie的读取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getCookie(c_name)
{
if (document.cookie.length>0) 
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-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.substring(c_start,c_end))
    } 
}
return ""
}
cookie的删除
将cookie的有效时间改成昨天。

总结

共同点：

共同点：都是保存在浏览器端、且同源的

区别

  1. sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
  2. localstorage在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
  3. cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

本文参考链接： 关于Cookie、session和Web Storage