html 页面存储,HTML本地存储

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

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

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

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

------------w3cshool

html提供了两个存储数据的对象方法

window.localStorage 永久存储

window.sessionStorage 会话级别的存储

能存储的东西：

数组，图片，json，样式，脚本。。。(只要是能序列化成字符串的内容都可以存储)

window.localStorage

该对象下共有四个api

api

说明

localStorage.setItem()

增加数据项

localStorage.getItem()

读取本地数据

localStorage.removeItem()

删除数据项

localStorage.clear()

移除所有数据

localStorage.length

属性，localStorage存储数据的长度(存了几条)

localStorage.key

同localStorage.getItem()

localStorage.setItem(key，value)，向本地存入数据

key: 必须是字符串的形式；value：可以是任意类型的

Document

window.localStorage.setItem("one", "第一条数据")

window.localStorage.setItem("tow", 34343)

window.localStorage.setItem("three", true)

window.localStorage.setItem("four", {name: "张三"})

window.localStorage.setItem(five, "key不为字符串时")

那么怎么看我们存入的数据呢？

浏览器打开页面>开发者工具>application>Local Storage

就能看到我们存入的数据了

Snipaste_2021-04-12_20-17-01.png

很明显，程序中最后一个当key不是一个字符串的时候，没有存进去

localStorage.getItem(key) 从本地读取数据

Document

window.localStorage.setItem("one", "第一条数据")

window.localStorage.setItem("tow", 34343)

window.localStorage.setItem("three", true)

window.localStorage.setItem("four", {name: "张三"})

// window.localStorage.setItem(five, "key不为字符串时")

var a = window.localStorage.getItem("one")

var b = window.localStorage.getItem("tow")

var c = window.localStorage.getItem("three")

var d = window.localStorage.getItem("four")

console.log(a);

console.log(b);

console.log(c);

console.log(d);

到控制台看打印出的结果

Snipaste_2021-04-12_20-23-31.png

看到打印出的结果，有两点需要思索一下了

1.得到的数据是什么类型的？

打印一下类型就行了

console.log(typeof a);

console.log(typeof b);

console.log(typeof c);

console.log(typeof d);

结果控制台打印的是清一色的“string”，因为localStorage只支持string类型的存储

2.存入的对象为什么是[object Object]？

明白了上面的操作就不难理解了。本地存储是将value的内容都先变成了string类型再存入本地的，那要如何存储对象，数组这些数据呢？

在数据存入之前，将对象转换成JSON字符串，使用JSON.stringify(obj)方法：

var obj = {

name: "张三",

age: 20

}

var objJSON = JSON.stringify(obj)

window.localStorage.setItem("userInfo", objJSON)

这时候再看，value就不再是[object Object]了

Snipaste_2021-04-12_20-44-31.png

同样获取数据是还得把他转换回对象，毕竟操作一个json字符串没有必要，使用JSON.parse(data)方法进行转换

var data = window.localStorage.getItem("userInfo")

console.log(data);

var JSONObj = JSON.parse(data)

console.log(JSONObj);

Snipaste_2021-04-12_20-51-45.png

数组也一个道理

localStorage.removeItem(key) 删除本地数据

window.localStorage.removeItem("userInfo")

localStorage.clear() 清空本地数据

为了直观的观察，我们可以通过点击按钮的形式来看

Snipaste_2021-04-12_20-59-20.png

Document

删除本地数据

var btn = document.getElementById("btn")

btn.addEventListener('click', () => {

window.localStorage.clear()

})

var obj = {

name: "张三",

age: 20

}

var objJSON = JSON.stringify(obj)

window.localStorage.setItem("userInfo", objJSON)

window.localStorage.setItem("a", "456")

window.sessionStorage

用法几乎同 window.localStorage，区别就是sessionStorage 不是永久存储的，当浏览器关闭时，sessionStorage 存储的数据就会丢失

注意：

1.如果在取本地数据没获取到，但是后面的程序用到了这个数据，程序可能就会报错，所以需要做处理，比如获取一个数组，以防万一，在没有取到值的情况下赋给一个空数组

var myWantArr = JSON.parse(window.localStorage.getItem("data") ) || []

如果获取的数据是对象或者数组，尽量不要直接获取里面的成员，如

var firstData= JSON.parse(window.localStorage.getItem("data") )[0] || []

因为很有可能你是在后面的程序中直接操作这个变量，对于第一次打开你的网页的人，它的本地是没有数据的，这样可能直接导致程序报错，无法执行后面的程序

2.不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口)，但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。