本地存储----cookie、localStorage、sessionStorage

最新推荐文章于 2024-08-22 17:49:29 发布

@小盆友

最新推荐文章于 2024-08-22 17:49:29 发布

阅读量821

点赞数

分类专栏：本地存储 webStorage 文章标签： cookie localStorage sessionStorage

本文链接：https://blog.csdn.net/ShIcily/article/details/89879399

版权

本地存储同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

webStorage

1 篇文章 0 订阅

订阅专栏

一、什么是 HTML 本地存储？

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

二、浏览器支持

表格中的数组指示了完全支持本地存储的首个浏览器版本。

API
Web Storage	4.0	8.0	3.5	4.0	11.5

三、HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

四、localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

一、localStorage的使用

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

实例解释：

创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
取回 "lastname" 的值，并把它插到 id="result" 的元素中

上例也可这样写：

// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;

删除 "lastname" localStorage 项目的语法如下：

localStorage.removeItem("lastname");

注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";

1、【增】添加数据。注意：【改】是重新赋值和增的用法一致

参数：格式为key = value形式。数据类型为：字符串，也可以用变量

2、【查】读取数据

3、【改】修改数据

4、【删】删除数据

5、【判断】是否有这个key数据

6、将数据转换成字符串

7、将JSON存储到localStorage里

8、删除localStorage缓存中某一行的数据

例如：

思路：localStorage里的数据是键值对
list 是它的键
你要删list 就removeItem(‘list’)
删里面的数据就getItem(‘list’) 得到数组操作完再 set进去

function f(i){
    var list = JSON.parse(localStorage.getItem('list'));
    list.splice(i, 1);
    localStorage.setItem('list', JSON.stringify(list));
}

使用场景：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。

简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。

二、localStorage的优势

1、localStorage拓展了cookie的4K限制

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

三、localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

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

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

五、sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

1、什么是sessionStorage？

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

支持sessionStorage的浏览器最小版本：IE8、Chrome 5。

sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

2、sessionStorage的特点有哪些？

1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)

2) 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

3、sessionStorage的使用方法？

一、存储数据

采用setItem()方法存储

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

通过属性方式存储　　

sessionStorage['testKey'] = '这是一个测试的value值';

二、读取数据

通过getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

通过属性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值

三、存储Json对象

sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

四、清除数据

sessionStorage.clear();

它可以在父页面调用子页面时添加或者在子页面中刚刚加载时执行

4、sessionStorage的优势？

1、生命周期：sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；