JavaScript笔记(25)之本地存储

接下来就要将本地存储啦,讲完就快到jQuery了,加油!还有一百多节(?)

本地存储

目标:

本地存储特性

• 数据存储在用户浏览器中
• 设置,读取方便,甚至页面刷新不丢失数据
• 容量较大,sessionStorage约5M,localStorage约20M.
• 只能存储字符串,可以将对象JSON.stringify()编码后存储(后面会学)

window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一窗口(页面)下数据可以共享
3. 以键值对的形式存储使用

存储数据:

sessionStorage.setItem(key, value)

假设现在我想将填入的数据储存下来

代码的写法;

我们只要点进网页中按下F12

当然不止存储数据,也可以做别的操作

获取数据:

session.Storage.getItem(key)

删除数据:

sessionStorage.removeItem(key)

删除所有数据:

sessionStorage.clear()

window.localStorage

1. 声明周期永久有效,除非手动删除,否则关闭页面也会存在
2. 可以多窗口(页面)共享(同一浏览器可以共享)
3. 以键值对的形式存储使用

它的操作和前面的是一样的

存储数据:

localStorage.setItem(key, value)

获取数据:

localStorage.getItem(key)

删除数据:

localStorage.removeItem(key)

删除所有数据:

localStorage.clear()

记住用户名案例

只要我们选中"记住用户名"的勾选框,就能将我们的用户名存储在本地,一遍下次使用.

我们用之前的文件写过存储数据的操作:

因为用的是localStorage的方法,所以就算换了个窗口,数据也是存在的,只要是在同一个浏览器下.

我们现在存一个试试,看一下效果

当我刷新这个页面时,用户名就自动填充进来了.

当我取消勾选以后再刷新,输入框就不会自动填充了

下一节开始就是jQuery了.