2017-08-01

本地存储(9-5)

本地存储

前情提要

[x] 在客户端JS不能操作用户电脑磁盘(保护客户端运行的安全)
[x] 编码解码
中文编码解码，防止传递存储过程中出现乱码
- escape() & unescape()
- encodeURIComponent() decodeURIComponent()
- encodeURI() decodeURI()
  1
  2
  3
  4
  var str= '我是很优秀的';
  var n=escape(str);//编码
  var m=unescape(n);//解码
[x] 本地存储都是明文存储
对于重要的信息一般不要存储到本地，非要存储需要加密
- 可逆转加密:加密完成还可以解密回来
- 不可逆转加密 : MD5（推荐）
  1
  2
  3
  4
  <script charset="UTF-8" type="text/javascript" src="js/md5.js"></script>
  var name = "我是很优秀的";
  hex_md5(name);//加密结果：2c8219c49e332a27a757162eeb1716c9

本地存储基本概念

[x] js本地存储概念:
- 使用JS向浏览器的某个位置中存储的内容,浏览器关闭了，存储的信息不销毁,重新打开浏览器时依然可获取到上一次存储的信息
[x] js本地存储的方案:
- [ ] 传统方案:
  - cookie:把信息存储到客户端的浏览器中(在浏览器和服务器间来回传递)
  - session:把信息存储到服务器上(服务器存储)
  购物车存储：
  存储3份：
  cookie本地存储一份
  session服务器存储一份
  数据库存一份(防止前两份丢失)
  哪位用户 在哪个IP上 买了什么东西

- [ ]  HTML5方案: **webStorage**
    - **`localStorage`**  :  **永久存储**到客户端的本地
    -  **sessionStorage**  :  信息的**会话存储**，会话窗口关闭信息就消失

webStorage、cookie方法

[x] webStorage方法
- setItem([key],[value]) : 向客户端的本地存储一条记录;
  - 存储的[value]需是字符串格式的,如果编写的不是字符串,浏览器也会默认转化为字符串存储，但是如果是object类型需要通过JSON.stringify({"z": "l"})转换
  - 同源下存储的[key]不重复,如有的话,是把重修改信息值的;（同源：协议、域名、端口号都相同）
  1
  2
  3
  localStorage.setItem('age',7); //7是字符串
  //对象格式的无法通过toString()默认转化为字符串格式，要通过下列方式
  localStorage.setItem('age', JSON.stringify({"z": "l"}));
- getItem([key]):获取之前存储的值
  1
  localStorage.getItem('age')
- removeItem([key]) :移除KEY对应的存储记录
  1
  localStorage.removeItem('age');
- clear() : 把当前源下所有的存储记录都移除掉
  1
  localStorage.clear();
- localStorage.length:获取存储的记录条数
- localStorage.key(0):获取索引为0这一项的KEY是什么

localStorage和sessionStorage方法用法一样

[x] cookie方法

1 2	document.cookie="age=7"; document.cookie;//"age=7"

方法参考自制库cookie.js

setValue
getValue

removeValue

<script charset="utf-8" type="text/javascript" src="js/cookie.js"></script>
cookieRender.set({
           name: 'age',
           value: 7
       });
cookieRender.get('age');

区别`cookie` `localStorage` `sessionStorage`

[x] localStorage和sessionStorage的区别:
- [ ] localStorage属于永久存储到本地,只有自己手动的去删除才会消失
- [ ] sessionStorage属于临时的会话存储,页面关闭,存储信息就清除(F5只是把当前的DOM结构等进行重新的渲染,会话并没有关闭)

[x] cookie 和 localStorage的区别:
- [ ] 兼容：
- cookie 兼容所有的浏览器,
- localStorage 不兼容IE6~8
- [ ] 大小：
  - cookie一般同源下只能存储4KB的内容;
  - localStorage一般同源下只能存储5MB;
- [ ] 时间：
  - cookie有过期时间的
  - localStorage永久存储
- [ ] 禁用：
  - 用户可能出于安全的角度禁用cookie(无痕浏览器)，
  - 不能禁止localStorage。

本地存储的使用?

[x] cookie:
- 存储少量信息或者是需要浏览器兼容的都需要使用cookie来进行存储
- [ ] 记住用户名密码；
- [ ] 用户的部分信息（当用户登录成功会把用户的一些信息记录到本地cookie中,任何页面都可知道当前登录的用户是谁）；
- [ ] 购物车…（需要兼容）
[x] localStorage:优化手段
在PC端可用其存储
[ ] 某一个JS或者CSS中的源代码；（页面样式一般不变）
[ ] 把一些不需常更新的数据存储到本地，可设置存储的时间，重新刷新页面超过了设置时间则从新获取没超过使用本地数据；

本地存储基本概念

webStorage、cookie方法

区别cookie localStorage sessionStorage

本地存储的使用?

区别`cookie` `localStorage` `sessionStorage`