常见的浏览器存储⽅式（cookie、localStorage、
sessionStorage）
今天我们从前端的⾓度了解⼀下浏览器存储，我们常见且常⽤的存储⽅式主要由两种：cookie、webStorage（localStorage和sessionStorage）。下⾯我们来⼀⼀认识它们。
Cookie基于HTTP规范，⽤来识别⽤户。
Cookie是服务器发送到浏览器的⼀⼩段数据，会在浏览器下次向同⼀服务器再发起请求时被携带并发送到服务器上。Cookie诞⽣之初的作⽤就是解决HTTP的⽆状态请求，⽤来记录⼀些⽤户相关的⼀些状态。
•会话状态管理（如⽤户登录状态、购物车、游戏分数或其它需要记录的信息）
•个性化设置（如⽤户⾃定义设置、主题等）
•浏览器⾏为跟踪（如跟踪分析⽤户⾏为等）
因为⼀些前端交互的需要，后来cookie也被⽤于存储⼀些客户端的数据。
Cookie的原⽣api不友好，需要⾃⾏封装⼀下。下⾯是封装后的⽅法。
创建cookie
/**
* @description js原⽣设置cookie
* @param {String} name 给你要设置的cookie起个名字（key）
* @param {String} value cookie的具体内容(value)
* @param {String} expiredays 设置cookie的过期时间，单位：天
*/
function setCookie(name, value, expiredays) {
var exdate=new Date();
exdate.Date() + expiredays);
if (start !== -1) {
start = start + name.length + 1;
var end = kie.indexOf(';', start);
if (end === -1) {
end = kie.length;
return kie.substring(start, end));
}
}
}
return '';
}
/**
* @description js原⽣获取cookie⽅法2
* @param {String} name 你要获取的cookie名
*/
function getCookie(name) {
var cookieArr = kie.split(';') || [];
if(!cookieArr.length){
return '';
}
for(var i = 0; i < cookieArr.length; i ++){
var key = $.trim(cookieArr[i]).split('=')[0];
var value = $.trim(cookieArr[i]).split('=')[1];
if(key === name){
return value;
}
}
}
检查cookie是否已存在
function checkCookie() {
sessionstorage和localstorage 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,365);
}
}
}
创建cookie
/**
* 'name', cookie命名
* 'value'，cookie的值
* {
* expires: 7, // cookie有效期，单位天；默认值：会话cookie，关闭浏览器cookie失效。
* path: '/', // cookie影响到的路径；值为'/'，表⽰设置cookie在整个域中可⽤；默认值：创建cookie的页⾯路径。
* domain: 'example', // 定义cookie有效的域。默认值：创建cookie的页⾯域。
* secure: false, // 定义cookie安全性，默认值：false，设置为true，则cookie在http中是⽆效的，cookie的传输需要使⽤安全协议（https）。* }
*/
$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example', secure: false});
读取cookie
$.cookie('name'); //name存在返回对应value，不存在返回null
读取所有可⽤的cookies：
$.cookie(); //{'name': value}
TODO：直接调⽤会报错？
删除cookie
//成功删除cookie时返回true，否则返回false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
注意：删除cookie时，必须传递⽤于设置cookie的完全相同的路径，域和安全选项，除⾮您依赖于默认选项。
即：设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则⽆法成功删除cookie。
// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true
TODO：$.removeCookie⽆效？
（jquery1.9.1.js + kie.js，插件⽆重复引⽤的情况，$.removeCookie提⽰undefined）
webStorage基于HTML5规范
HTML5 提供了两种在客户端存储数据的新⽅法：localStorage和sessionStorage，挂载在window对象下。
webStorage是本地存储，数据不是由服务器请求传递的。从⽽它可以存储⼤量的数据，⽽不影响⽹站的性能。
Web Storage的⽬的是为了克服由cookie带来的⼀些限制，当数据需要被严格控制在客户端上时，⽆须持续地将数据发回服务器。⽐如客户端需要保存的⼀些⽤户⾏为或数据，或从接⼝获取的⼀些短期内不会更新的数据，我们就可以利⽤Web Storage 来存储。
localStorage的⽣命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除⾮主动的去删除数据。如果想设置失效时间，需⾃⾏封装。
sessionStorage 的⽣命周期是在浏览器关闭前。
特性：
•关闭浏览器sessionStorage 失效；
•页⾯刷新不会消除数据；
•只有在当前页⾯打开的链接，才可以访sessionStorage的数据，使⽤window.open打开页⾯和改变localtion.href⽅式都可以获取到
sessionStorage内部的数据;
存储⽅式作⽤与特性存储数量及⼤⼩api
cookie ●存储⽤户信息，获取数据需
要与服务器建⽴连接。
●可存储的数据有限，且依赖
于服务器，⽆需请求服务器的数
据尽量不要存放在cookie中，以
免影响页⾯性能。
●可设置过期时间。
●最好将cookie控制在4095B以内，
超出的数据会被忽略。
● IE6或更低版本最多存20个
cookie； IE7及以上版本最多可以有
50个；Firefox最多50个；chrome和
Safari没有做硬性限制。
原⽣、$.cookie（详见上⽂）
localStorage ●存储客户端信息，⽆需请求
服务器。
●数据永久保存，除⾮⽤户⼿
动清理客户端缓存。
●开发者可⾃⾏封装⼀个⽅
法，设置失效时间。
5M左右，各浏览器的存储空间有差
异。（感兴趣的同学可以⾃⼰试⼀
下）。
// 保存数据到 localStorage
localStorage.setItem('key', 'value');
// 从 localStorage 获取数据
let data = Item('key');
// 从 localStorage 删除保存的数据
// 从 localStorage 删除所有保存的数
据
localStorage.clear();
●存储客户端信息，⽆需请求
服务器。
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
sessionStorage ●数据保存在当前会话，刷新
页⾯数据不会被清除，结束会话
（关闭浏览器、关闭页⾯、跳转
页⾯）数据失效。
同localStorage
let data
= Item('key');
// 从 sessionStorage 删除保存的数据
// 从 sessionStorage 删除所有保存的
数据
sessionStorage.clear();
总结：
以上所述是⼩编给⼤家介绍的常见的浏览器存储⽅式（cookie、localStorage、sessionStorage），希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论