JavaScript 存储对象 sessionStorage （会话存储）和 localStorage（本地存储）

JavaScript 存储对象

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
控制台查看 F12打开控制台（以火狐和Google 为例）

localStorage属性

它是本地存储对象，相当于手机App里面的缓存，也相当于电脑上面的浏览器缓存，我们可以调用这个属性在浏览器里面存储一定的数据

登录的时候，用于保存账号，例于下次登陆
登录以后用于保存当前登陆的相关信息

特点：

localStorage在浏览器关闭以后还会存在，如果不是手动清除，它会一直存在
localStorage它可以跨页面，但是不能跨域（相同的域共享一个localStorage，不同的域不能共享localStorage）

localStorage里面，只能存放字符串，如果你存放的是其它的类型，也会被转成字符串

if (！window.localStorage) {
            alert("浏览器不支持localstorage");
            return false;
        } else {
            var storage = window.localStorage;//window.localStorage  查看本地储存 
   // setItem 存数据的方式  setItem("key值","value");
        localStorage.setItem("name", "存储");
        localStorage.hobby = "唱歌";
        localStorage["hobby"] = "跳舞";
        localStorage.setItem("id", Date.now());

        // window.localStorage  查看本地储存
        console.log(window.localStorage);
        localStorage

        //表现形式为 键值对   key:value;
        id: "1567731041669"

        // getItem 取值 
        localStorage.getItem("id"); 
        localStorage.id;
        localStorage["name"];

        // .key(1) 取键值   取值从0开始计数
        localStorage.key(1);

        }

seccionStorage属性

sessionStorage在浏览器关闭以后会自己清除掉
sessionStorage它不能跨普通的页面，也不能跨域
sessionStorage它可以跨window.open()打开的页面的（window.open()方法打开的页面共享一个sessionStorage）
sessionStorage里面，只能存放字符串，如果你存放的是其它的类型，也会被转成字符串

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

在之前所学习的localStorage，sessionStorage它们也可以存储一定的内容，但是要注意，它们这两个都是window下面的属性window.localStorage,window.sessionStorage

而我们的cookie而不是window下面的属性,cookie它是document下面的属性,cookie有一套专门的取值与赋值方法，与之前的localStorage，sessionStorage不同

cookie与storage的区别：

1.cookie是document下面的属性 storage在window下面

2.localstorage需要手动清除，sessionstorage关闭浏览器自动清除，cookie可以设置时间自动清除

3.localstorage可以跨页面，sessionstorage只支持跨父子页面，cookie可以跨页面但是不可以跨路径

4.cookie存放数据的大小4kb左右(每次在进行http请求都会携带cookie)，然而storage数据储存大小一般在5M或更大

从安全性上来说 session的安全性是大于cookie

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie="name属性=value值";

document.cookie="userName=cookie";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2

如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

sereasuesue

发布了65 篇原创文章 · 获赞 12 · 访问量 1万+

私信关注