【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

程序员哆啦A梦发布于 31 分钟前

大家好,我是魔王哪吒,很高兴认识你~~

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。

每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!

不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。

【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

前言

如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,接收好挑战了吗?

笔芯❤️~

【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

知识点

使用HTML5中的Web Storage API, 可以在客户端存储更多的数据,,可以实现数据在多个页面中共享甚至是同步,对于复杂的数据,可以使用 Web SQL Database API 来实现。

掌握 localStorage 和 sessionStorage 存储方式, 存储 JSON 对象的数据, 使用 Web SQL Database 的基本操作。

Web Storage

Web Storage API 的属性,方法,事件。

cookie 可用于传递少量的数据, 是一个在服务器和客户端 之间来回传送文本值的内置机制,服务器可以根据 cookie 追踪 用户在不同页面的访问信息。

cookie 的特点:

第一,大小的限制,cookie 的大小 限制 在 4KB 以内。

第二,带宽的限制,cookie 数据 会在服务器和浏览器 之间来回传送,所以访问哪个页面,都会消耗网络的带宽。

第三,安全风险,因为 cookie 会频繁在网络中传送, 所以在网络上是可见的,在不加密的情况下,是由安全风险的。

第四,操作复杂,在客户端的浏览器中,使用 JavaScript 操作 cookie数据是比较复杂的。

所以,如果对于较小的数据,并且需要在服务器和客户端之间频繁传送时,才有 cookie 存在的意义。

什么是 web storage

Web Storage 可以在客户端保存大量的数据,Web Storage本地存储的优势:

第一,存储容量大。

第二,零带宽。Web Storage 中的数据仅仅存储在本地,不会与服务器发生任何交互行为,不存在网络带宽的占用问题。

第三,编程接口。提供了一套丰富的接口,使得数据操作更加方便。

第四,独立的存储空间。每个域都有独立的存储空间,各个存储空间是完全能独立的,不会造成数据的混乱。

localStorage 和 sessionStorage

Web Storage 本地存储 包括 sessionStorage 会话存储 和 localStorage 本地存储。

cookie 和 session 完全是服务器端可以操作的数据,sessionStorage 和 localStorage 完全是浏览器端操作的数据。

cookie 和 session 完全继承同一个 Storage API, 所以 sessionStorage 和 localStorage 的编程接口是一样的。

sessionStorage 和 locatlStorage 区别在于 数据存在时间范围 和 页面范围。

sessionStorage: 数据只保存到存储它的窗口或标签关闭时,数据在构建它们的窗口或标签内也可见

localStorage: 数据的生命周期比窗口或浏览器的生命周期长,数据可被同源的每个窗口或者标签共享。

监测是否支持 Web Storage

示例:

function CheckStorageSupport() {

// 监测 sessionStorage

if(window.sessionStorage) {

console.log(“浏览器支持sessionStorage”);

}else{

console.log("浏览器不支持sessionStorage");

}

// 监测localStorage

if(window.localStorage) {

console.log("浏览器支持localStorage");

}else {

console.log("浏览器不支持localStorage");

}

}

设置和获取Storage数据

保存数据到sessionStorage

window.sessionStorage.setItem("key”,"value");

setItem()表示保存数据的方法

sessionStorage中获取数据:

value = window.sessionStorage.getItem("key");

getItem()为获取数据的方法

保存数据的写法:

window.sessionStorage.key = "value";

window.sessionStorage["key"] = "value"

获取数据的方法更加直接:

value = window.sessionStorage.key;

value = window.sessionStorage["key"]

使用sessionStorage 和 localStorage

示例:

function DaDa() {

window.localStorage.setItem("localKey", "localVlaue");

// 获取

console.log(window.localStorage.getItem("localKey"));

window.sessionStorage.setItem("sessionKey", "sessionValue");

// 获取

console.log(window.sessionStorage.getItem("sessionKey"));

}

Storage接口

示例:

interface Storage{

readonly attribute unsigned long length;

DOMString ? key(unsigned long index);

getter DOMString getItem(DOMString key);

setter creator void setItem(DOMString key, DOMString value);

deleter void removeItem(DOMString key);

void clear();

}

  1. length属性,表示当前storage对象中存储的键/值对的数量。

Storage对象是同源的,length属性只能反映同源的键/值对数量

  1. key方法,获取指定位置的键。

  2. getItem方法,根据键返回相应的数据值。

  3. setItem方法,将数据存入指定键对应的位置。

  4. removeItem方法,从存储对象中移除指定的键/值对。

  5. clear方法,清除Storage对象中所有的数据,如Storage对象是空的,则不执行任何操作。

使用Storage对象保存页面的内容

示例:

// 保存数据到sessionStorage

function SaveStorage(frm) {

var storage = window.sessionStorage;

storage.setItem("name",frm.name.value);

storage.setItem("age", frm.age.value);

}

遍历显示sessionStorage中的数据

function Show(){

var storage = window.sessionStorage

var result = "";

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

var key = storage.key(i);

var value = storage.getItem(key);

result += key + ":" + value + ";";

}

}

存储JSON对象的数据

Storage 是以字符串保存数据的,所以在保存 JSON 格式的数据之前,需要把 JSON 格式的数据转化为字符串,这个操作叫序列化。

使用JSON.stringify()序列化json格式的数据为字符串数据:

var dada = JSON.stringify(jsonObject);

把数据反序列化为JSON格式:

var jsonObject = JSON.parse(stringData);

web Storage建立一套会在数据更新时触发的事件通知机制,无论监听的窗口是否存储过该数据,只要与执行存储的窗口是同源的,都会触发web Storage事件。

window.addEventListener("storage", EventHandle, true);

StorageEvent事件接口:

interface StorageEvent:Event {

readonly attribute DOMString key;

readonly attribute DOMString ? oldValue;

readonly attribute DOMString ? newValue;

readonly attribute DOMString ? url;

readonly attribute Storage? storageArea;

}

key属性:包含了存储总被更新或删除的键;oldValue属性:包含了更新前键对应的数据。

newValue属性:包含了更新后的数据;url属性:指向Storage事件的发生源。

storageArea属性:该属性是一个引用,指向值发生改变的localStorage或sessionStorage

web SQL Database

Web SQL Database 使用的是 SQLite 数据库,允许应用程序通过一个异步的 JavaScript 接口访问数据库。SQLite是一款轻型的数据库。

  1. openDatabase() 方法,使用现有的数据库或新建数据库来创建数据库对象。

  2. transaction() 方法,允许设计者控制事务的提交或回滚。

  3. executeSql() 方法,用于执行真实的SQL查询。

操作Web sql数据库

var db = openDatabase("TestDB", "1.0", "测试", xxxx)

共5个参数:

  1. 数据库名
  2. 版本号
  3. 数据库的描述
  4. 数据库的大小
  5. 创建回调函数

创建数据表

transaction()方法用于进行事务处理,executeSql()方法用于执行sql语句。

创建数据表:

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');

});

添加数据到数据表:

db.transaction(function (tx){

tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));

tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));

});

读取数据库中的数据:

db.transaction(function (tx){

tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){

var len = results.rows.length;

for (var i=0; i<len; i++){

console.log(results.rows.item(i).Name);

}

},null);

});

html5几种存储形式

  1. 本地存储-localStorage, sessionStorage

  2. 离线缓存 application cache

  3. indexedDB 和 webSQL

localStorage 和 sessionStorage

  • localStorage永久存储,永不失效除非手动删除

  • sessionStorage浏览器重新打开后就消失了

大小,每个域名是5M,cookie第一是由大小限制,大概4K左右,第二,ie6域名下有个数限制。

HTML API

在浏览器的API有两个,localStorage和sessionStorage

window对象中:localStorage对应window.localStoragesessionStorage对应window.sessionStorage

localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取或修改到同一份localStorage的数据。

sessionStoragelocalStorage更严格,除了协议、主机名、端口外,还要求在同一窗口下

方法及含义:

setItem(‘key’,‘value’)    储存数据

getItem(‘key’) 读取数据

removeItem(‘key’) 删除数据

clear() 清空数据

使用方法详解:

//储存数据

window.localstage.setItem('key','value')

// key : 数据的名称

// value : 数据

// 所存储的是数据必须是string类型

//读取数据

window.localstage.getItem('key')

// key : 数据的名称

// 如果数据不存在,返回null (一般用它做判断)

//删除数据

window.localstage.removeItem('key')

// key : 数据的名称

// 删除本地存储中的指定数据

//清空数据

window.localstage.clear()

// 清空本地存储中的所有数据

什么是localStorage和sessionStorage?

localStorage和sessionStorage的异同?

相同点:两者的API完全相同,都是在浏览器端存储数据。

不同点:

  1. localStorage存储的数据是永久性数据,页面刷新,即使浏览器重启,甚至操作系统重启也不会丢失,并且存储的数据在同源(协议、域名、端口号一致)下的标签页和window窗口之间共享。

  2. sessionStorage存储的数据有些苛刻,页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)。

localStorage的局限

局限:

1.各个浏览器的支持的大小不一样,业界认为是5M,并且在不同的浏览器不同版本支持度不一样

2.localStorage的数据不能被爬虫抓取

近期推荐

  • HTML5中的拖放功能
  • Vue.js笔试题解决业务中常见问题
  • 达达前端个人web分享92道JavaScript面试题附加回答
  • 【思维导图】前端开发-巩固你的JavaScript知识体系
  • 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
  • 连肝7个晚上,总结了计算机网络的知识点!(共66条)

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

我们下期见!

html5javascript程序员html前端

阅读 37发布于 31 分钟前

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议


程序员哆啦A梦

达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发...

avatar

程序员哆啦A梦

面向JavaScript爱好人员提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。

2.2k 声望

286 粉丝

0 条评论

得票时间

avatar

程序员哆啦A梦

面向JavaScript爱好人员提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。

2.2k 声望

286 粉丝

宣传栏

大家好,我是魔王哪吒,很高兴认识你~~

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。

每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!

不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。

【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

前言

如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,接收好挑战了吗?

笔芯❤️~

【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

知识点

使用HTML5中的Web Storage API, 可以在客户端存储更多的数据,,可以实现数据在多个页面中共享甚至是同步,对于复杂的数据,可以使用 Web SQL Database API 来实现。

掌握 localStorage 和 sessionStorage 存储方式, 存储 JSON 对象的数据, 使用 Web SQL Database 的基本操作。

Web Storage

Web Storage API 的属性,方法,事件。

cookie 可用于传递少量的数据, 是一个在服务器和客户端 之间来回传送文本值的内置机制,服务器可以根据 cookie 追踪 用户在不同页面的访问信息。

cookie 的特点:

第一,大小的限制,cookie 的大小 限制 在 4KB 以内。

第二,带宽的限制,cookie 数据 会在服务器和浏览器 之间来回传送,所以访问哪个页面,都会消耗网络的带宽。

第三,安全风险,因为 cookie 会频繁在网络中传送, 所以在网络上是可见的,在不加密的情况下,是由安全风险的。

第四,操作复杂,在客户端的浏览器中,使用 JavaScript 操作 cookie数据是比较复杂的。

所以,如果对于较小的数据,并且需要在服务器和客户端之间频繁传送时,才有 cookie 存在的意义。

什么是 web storage

Web Storage 可以在客户端保存大量的数据,Web Storage本地存储的优势:

第一,存储容量大。

第二,零带宽。Web Storage 中的数据仅仅存储在本地,不会与服务器发生任何交互行为,不存在网络带宽的占用问题。

第三,编程接口。提供了一套丰富的接口,使得数据操作更加方便。

第四,独立的存储空间。每个域都有独立的存储空间,各个存储空间是完全能独立的,不会造成数据的混乱。

localStorage 和 sessionStorage

Web Storage 本地存储 包括 sessionStorage 会话存储 和 localStorage 本地存储。

cookie 和 session 完全是服务器端可以操作的数据,sessionStorage 和 localStorage 完全是浏览器端操作的数据。

cookie 和 session 完全继承同一个 Storage API, 所以 sessionStorage 和 localStorage 的编程接口是一样的。

sessionStorage 和 locatlStorage 区别在于 数据存在时间范围 和 页面范围。

sessionStorage: 数据只保存到存储它的窗口或标签关闭时,数据在构建它们的窗口或标签内也可见

localStorage: 数据的生命周期比窗口或浏览器的生命周期长,数据可被同源的每个窗口或者标签共享。

监测是否支持 Web Storage

示例:

function CheckStorageSupport() {

// 监测 sessionStorage

if(window.sessionStorage) {

console.log(“浏览器支持sessionStorage”);

}else{

console.log("浏览器不支持sessionStorage");

}

// 监测localStorage

if(window.localStorage) {

console.log("浏览器支持localStorage");

}else {

console.log("浏览器不支持localStorage");

}

}

设置和获取Storage数据

保存数据到sessionStorage

window.sessionStorage.setItem("key”,"value");

setItem()表示保存数据的方法

sessionStorage中获取数据:

value = window.sessionStorage.getItem("key");

getItem()为获取数据的方法

保存数据的写法:

window.sessionStorage.key = "value";

window.sessionStorage["key"] = "value"

获取数据的方法更加直接:

value = window.sessionStorage.key;

value = window.sessionStorage["key"]

使用sessionStorage 和 localStorage

示例:

function DaDa() {

window.localStorage.setItem("localKey", "localVlaue");

// 获取

console.log(window.localStorage.getItem("localKey"));

window.sessionStorage.setItem("sessionKey", "sessionValue");

// 获取

console.log(window.sessionStorage.getItem("sessionKey"));

}

Storage接口

示例:

interface Storage{

readonly attribute unsigned long length;

DOMString ? key(unsigned long index);

getter DOMString getItem(DOMString key);

setter creator void setItem(DOMString key, DOMString value);

deleter void removeItem(DOMString key);

void clear();

}

  1. length属性,表示当前storage对象中存储的键/值对的数量。

Storage对象是同源的,length属性只能反映同源的键/值对数量

  1. key方法,获取指定位置的键。

  2. getItem方法,根据键返回相应的数据值。

  3. setItem方法,将数据存入指定键对应的位置。

  4. removeItem方法,从存储对象中移除指定的键/值对。

  5. clear方法,清除Storage对象中所有的数据,如Storage对象是空的,则不执行任何操作。

使用Storage对象保存页面的内容

示例:

// 保存数据到sessionStorage

function SaveStorage(frm) {

var storage = window.sessionStorage;

storage.setItem("name",frm.name.value);

storage.setItem("age", frm.age.value);

}

遍历显示sessionStorage中的数据

function Show(){

var storage = window.sessionStorage

var result = "";

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

var key = storage.key(i);

var value = storage.getItem(key);

result += key + ":" + value + ";";

}

}

存储JSON对象的数据

Storage 是以字符串保存数据的,所以在保存 JSON 格式的数据之前,需要把 JSON 格式的数据转化为字符串,这个操作叫序列化。

使用JSON.stringify()序列化json格式的数据为字符串数据:

var dada = JSON.stringify(jsonObject);

把数据反序列化为JSON格式:

var jsonObject = JSON.parse(stringData);

web Storage建立一套会在数据更新时触发的事件通知机制,无论监听的窗口是否存储过该数据,只要与执行存储的窗口是同源的,都会触发web Storage事件。

window.addEventListener("storage", EventHandle, true);

StorageEvent事件接口:

interface StorageEvent:Event {

readonly attribute DOMString key;

readonly attribute DOMString ? oldValue;

readonly attribute DOMString ? newValue;

readonly attribute DOMString ? url;

readonly attribute Storage? storageArea;

}

key属性:包含了存储总被更新或删除的键;oldValue属性:包含了更新前键对应的数据。

newValue属性:包含了更新后的数据;url属性:指向Storage事件的发生源。

storageArea属性:该属性是一个引用,指向值发生改变的localStorage或sessionStorage

web SQL Database

Web SQL Database 使用的是 SQLite 数据库,允许应用程序通过一个异步的 JavaScript 接口访问数据库。SQLite是一款轻型的数据库。

  1. openDatabase() 方法,使用现有的数据库或新建数据库来创建数据库对象。

  2. transaction() 方法,允许设计者控制事务的提交或回滚。

  3. executeSql() 方法,用于执行真实的SQL查询。

操作Web sql数据库

var db = openDatabase("TestDB", "1.0", "测试", xxxx)

共5个参数:

  1. 数据库名
  2. 版本号
  3. 数据库的描述
  4. 数据库的大小
  5. 创建回调函数

创建数据表

transaction()方法用于进行事务处理,executeSql()方法用于执行sql语句。

创建数据表:

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');

});

添加数据到数据表:

db.transaction(function (tx){

tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));

tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));

});

读取数据库中的数据:

db.transaction(function (tx){

tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){

var len = results.rows.length;

for (var i=0; i<len; i++){

console.log(results.rows.item(i).Name);

}

},null);

});

html5几种存储形式

  1. 本地存储-localStorage, sessionStorage

  2. 离线缓存 application cache

  3. indexedDB 和 webSQL

localStorage 和 sessionStorage

  • localStorage永久存储,永不失效除非手动删除

  • sessionStorage浏览器重新打开后就消失了

大小,每个域名是5M,cookie第一是由大小限制,大概4K左右,第二,ie6域名下有个数限制。

HTML API

在浏览器的API有两个,localStorage和sessionStorage

window对象中:localStorage对应window.localStoragesessionStorage对应window.sessionStorage

localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取或修改到同一份localStorage的数据。

sessionStoragelocalStorage更严格,除了协议、主机名、端口外,还要求在同一窗口下

方法及含义:

setItem(‘key’,‘value’)    储存数据

getItem(‘key’) 读取数据

removeItem(‘key’) 删除数据

clear() 清空数据

使用方法详解:

//储存数据

window.localstage.setItem('key','value')

// key : 数据的名称

// value : 数据

// 所存储的是数据必须是string类型

//读取数据

window.localstage.getItem('key')

// key : 数据的名称

// 如果数据不存在,返回null (一般用它做判断)

//删除数据

window.localstage.removeItem('key')

// key : 数据的名称

// 删除本地存储中的指定数据

//清空数据

window.localstage.clear()

// 清空本地存储中的所有数据

什么是localStorage和sessionStorage?

localStorage和sessionStorage的异同?

相同点:两者的API完全相同,都是在浏览器端存储数据。

不同点:

  1. localStorage存储的数据是永久性数据,页面刷新,即使浏览器重启,甚至操作系统重启也不会丢失,并且存储的数据在同源(协议、域名、端口号一致)下的标签页和window窗口之间共享。

  2. sessionStorage存储的数据有些苛刻,页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)。

localStorage的局限

局限:

1.各个浏览器的支持的大小不一样,业界认为是5M,并且在不同的浏览器不同版本支持度不一样

2.localStorage的数据不能被爬虫抓取

近期推荐

  • HTML5中的拖放功能
  • Vue.js笔试题解决业务中常见问题
  • 达达前端个人web分享92道JavaScript面试题附加回答
  • 【思维导图】前端开发-巩固你的JavaScript知识体系
  • 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
  • 连肝7个晚上,总结了计算机网络的知识点!(共66条)

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

我们下期见!

以上是 【JS】localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能 的全部内容, 来源链接: utcz.com/a/110393.html

回到顶部