存储

存储

cookie

什么是cookie

• cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据

功能:

• 浏览器中进行数据的存储,用户名、密码

特性：

• 必须运行在服务器的环境下（开启服务器）
• 容量: 5kb
• 存储的数据类型: 字符串
• 存放是以域名形式区分的
• 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条
• Cookie默认是临时存储的，当浏览器关闭时，自动销毁
• 如果想长时间存放一个cookie，同时需要设置一个过期时间

缺点：

• cookie可能被禁用

  • 当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能

• cookie是与浏览器相关的

  • 这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的

• cookie可能被删除

  • 因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除

• cookie安全性不够高

  • 所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理

创建cookie

• document.cookie = “username=value”;
• 键值对

获取cookie的值

• document.cookie

XSS

XSS攻击全称跨站脚本攻击

• 是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中

能被XSS攻击需要以下两点：

• 需要向web页面注入恶意代码；
• 这些恶意代码能够被浏览器成功的执行。

部分阻止XSS的方法

• str=str.replace(/</?(script)>/gi,"($1)");
• str=str.replace(/href=(’|")javascript:.*?>/gi,"");

WebStorage

Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据

分类

• localStorage

  • 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

• sessionStorage

  • 会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁

• localStorage 和 sessionStorage都是window对象的属性

localStorage

• setItem()

  • 存储数据

  • 三种方法

    • localStorage.setItem(“keyname”,value)
    • localStorage.keyname = value;
    • localStorage[‘keyname’] = value;

• getItem()

  • 获取本地存储的值

  • 三种方法

    • localStorage.getItem(“keyname”)
    • localStorage.keyname
    • localStorage[‘keyname’]

• removeItem()

  • 删除指定key本地存储的值
  • localStorage.removeItem(“keyname”)

• clear()

  • 清空网站在本地保存的所有数据的
  • localStorage.clear( )

• 注：

  • 除字符串外其他类型需要通过JSON存储对象方式

    • 把对象转换成JSON字符串

      • JSON.stringify(对象)

    • 把json串转化为对象

      • JSON.parse(json串)

sessionStorage

• 同localStorage

localStorage、sessionStorage与cookie的区别

源

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制不同

• cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同

• sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域不同

• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者

Web Storage 的 api 接口使用更方便

XMind: ZEN - Trial Version