本地存储基础

本地存储特性

1.数据存储在用户浏览器中

2.设置、读取方便、甚至页面刷新不丢失数据

3.容量较大、sessionStorage约5M、localStorage约20M

4.只能存储字符串、可以将对象JSON.stringify()编码后存储

sessionStorage和localStorage的区别：

同：1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

异：1、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

2、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

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

Cookie

1. 什么是Cookie

Cookie的英文直译是饼干，在计算机术语中是指一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。

1. 作用

当你访问了某些网页，并且对网页的一些设置进行修改，cookies就能跟踪并记录到这些修改，当你下一次访问这个网页的时候，这个网页会分析你电脑上的cookies，进而采取措施像你返回更符合你个性化的网页;

当然，目前大部分广告的定位基础也是基于cookies的，比如你此前访问了大量的健身类网站，cookies记录了你的访问行为，广告主就能够根据你的访问行为，向你推送健身类的广告。“是否让浏览器记住你的密码？”这句话你是否还记得，我们在浏览器首次登陆某个网站的时候，就会弹出该提示，提醒我们保存账号密码，下次访问就不再需要输入账号密码了，这是Cookie的作用之一，但保存在计算机中的Cookie信息是一个比较私密的内容

本地存储window.sessionStorage

1.生命周期为关闭浏览器窗口

2.在同一个窗口（页面）下数据可以共享

3.以键值对的形式存储使用

本地存储 window.localStorage

1.生命周期永久生效，排除手动删除否则关闭页面也会存在

2.可以多窗口（页面）共享（同一浏览器可以共享）

3.以键值对的形式存储使用

储存数据

获取数据

删除数据

删除所有数据

本地存储的核心思路：

不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据

存储的数据格式：

但是本地存储里面只能存储字符串的数据格式，把我们的数组对象转换为 字符串格式JSON.stringify()

获取本地存储的数据，我们需要把里面的字符串数据转换为 对象格式JSON.parse()