cookies、sessionStorage和localStorage解释及区别

lucky_qi

localStorage

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
// 1、保存数据到本地
 
// 第一个参数是保存的变量名,第二个是赋给变量的值
 
localStorage.setItem('Author', 'local');
 
// 2、从本地存储获取数据
 
localStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
 
localStorage.removeItem('Author');
 
// 4、清除所有保存的数据
 
localStorage.clear();

image

sessionStorage

sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
// 1、保存数据到本地
 
// 第一个参数是保存的变量名,第二个是赋给变量的值
 
sessionStorage.setItem('Author', 'session');
 
// 2、从本地存储获取数据
 
sessionStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
 
sessionStorage.removeItem('Author');
 
// 4、清除所有保存的数据
 
sessionStorage.clear();

image

复杂数据存储

上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的

错误的存储:

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
sessionStorage.setItem('user', user);
 
console.log(sessionStorage.getItem('user'));

image
这个时候,就需要转换数据格式。

存储数据前:利用JSON.stringify将对象转换成字符串

获取数据后:利用JSON.parse将字符串转换成对象

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
user = JSON.stringify(user);
 
sessionStorage.setItem('user', user);
 
var account = sessionStorage.getItem('user');
 
console.log(account);
 
account = JSON.parse(account)
 
console.log(account);

image

cookie的保存与获取

cookie机制:如果不在浏览器中设置过期事件,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件,cookie会被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它
image
  • 保存用户登录状态
  • 跟踪用户行为
  • 定制页面
  • 创建购物车:使用cookie来记录用户需要购买的商品,再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品,方便随时进行比较)
// 1、保存数据到本地

    // 第一个参数是保存的变量名,第二个是赋给变量的值

    //保存cookie

    //参数:cookie名,cookie值,有效时长(单位:天)

    function saveCookie(cookieName, cookieValue, cookieDates) {

        var d = new Date();

        d.setDate(d.getDate() + cookieDates);

        document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toGMTString();

    }

cookie的获取

 function getCookie(cookieName) {

        var cookieStr = unescape(document.cookie);

        var arr = cookieStr.split("; ");

        var cookieValue = "";

        for (var i = 0; i < arr.length; i++) {

            var temp = arr[i].split("=");

            if (temp[0] == cookieName) {

                cookieValue = temp[1];

                break;

            }

        }

        return cookieValue;

    }

cookie的删除

 //删除cookie

    function removeCookie(cookieName) {

        document.cookie = encodeURIComponent(cookieName) +“=; expires =” + new Date();

    }

cookie缺点:

  1. 大小受限
  2. 用户可以操作(禁用)cookie,使功能受限
  3. 安全性较低
  4. 有些状态不可能保存在客户端。
  5. 每次访问都要传送cookie给服务器,浪费带宽。
  6. cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。
阅读 542
26 声望
0 粉丝
0 条评论
26 声望
0 粉丝
文章目录
宣传栏