cookie、localStorage和sessionStorage的特点及用法

cookie

一般由服务器生成,存放到客户端(浏览器中的)可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效.存储大约4Kb,存放条数30-50条左右,

// Date时间函数
var d = new Date() // 获取系统内置时间
var o = d.getTime() // 获取当前的时间戳
var b = d.getTime()+(7*60*60*24*1000) // 7天后的时间戳
var b = d.getTime()+(6000) // 6秒后的时间戳
d.setTime(b) // 根据时间戳设置日期
d.toGMTString() // 格林威治时间
d.toUTCString() // 世界时间

// 存储
document.cookie = 'sex=女';

// 存储并且设置过期时间
document.cookie='sex=女;expires='+d.toUTCString()

// 存储过期时间并设置存储位置 '/' 保存到根目录
document.cookie = 'sex=女;expires='+d.toUTCString() + ";path=/";

// 读取
console.log(document.cookie)

localStorage 本地存储

存储大小一般浏览器支持的是5Mb大小.永久有效，窗口或者浏览器关闭也会一直保存，不会自动清除，要手动永久清除，因此用作持久数据

localStorage.setItem('name','张三') // 添加
localStorage.setItem('name','李四') // 相同key的情况下是修改,现在localStorage存储的是name="李四"
localStorage.getItem('name') // 根据key(索引,键值)获取对应的值
localStorage.removeItem('name') // 根据键名删除
localStorage.clear() // 清除全部的localStorage

sessionStorage 临时存储

存储大小为5Mb大小, 仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

sessionStorage.setItem('name','张三') // 添加
sessionStorage.setItem('name','李四') // 相同key的情况下是修改,现在sessionStorage存储的是name="李四"
sessionStorage.getItem('name') // 根据key(索引,键值)获取对应的值
sessionStorage.removeItem('name') // 根据键名删除
sessionStorage.clear() // 清除全部的sessionStorage