web 存储

2017-01-29  本文已影响0人  凤爪dc

最近想自己随便做做的网页可以存储用户的行为，刷新时不会丢失，于是就看了下cookie和HTML5 web存储。

cookie#

cookie用于存储web页面的用户信息

cookie是以名值对形式存储

  username=feng zhao

在JavaScript 中使用 document.cookie 属性来创建 、读取、及删除 cookie
（一）创建

  document.cookie="username=John Doe; //创建的cookie
                expires=Thu, 18 Dec 2013 12:00:00 GMT; // 过期时间，默认在浏览器关闭时删除
                path=/"; //设置cookie路径，默认cookie属于当前路径

（二）修改
与创建的代码相同，将username=John Doe 换成 username=feng zhao 可达到修改的效果，旧的 cookie 将被覆盖。
（三）删除
同上，设置 expires 参数为以前的时间即可

HTML web存储#

使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
（只想说，刚接触的我并不理解上面这句，可能要我多实践才能理解吧）

localStorage 和 sessionStorage 对象
HTML主要使用上面这两个对象进行存储。

目前，很多浏览器都支持storage，与cookie相同，使用键值对的形式进行存储。常用的一些API有

| 语法 | 效果 |
| -
| localStorage.setItem(key,value); | 保存数据 |
| localStorage.getItem(key); | 读取数据 |
| localStorage.removeItem(key); | 删除单个数据 |
| localStorage.clear(); | 删除所有数据 |
session的API就把local改成session

用法#

1.cookie##

使用cookie基本的两个函数是设置与获取cookie值
设置

  function setCookie(cname,cvalue,exdays)
    {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString(); //设置存在的时间
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

获取

  function getCookie(cname)
    {
        var name = cname + "=";
        var ca = document.cookie.split(';'); //使用分号来分割 cookie 字符串
        for(var i=0; i<ca.length; i++)  //循环遍历寻找
                {
                    var c = ca[i].trim(); //去除前后空格
                    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                }
          return "";
     }

2.storage##

这个相对cookie比较简单使用
通过使用API
localStorage.setItem(key,value);与localStorage.getItem(key);
就可以实现localstorage的设置与调取

Cookie, LocalStorage 与 SessionStorage三者异同Cookie, LocalStorage 与 SessionStorage三者异同

最后，我自己尝试用cookie写了一个实现记住账号记住密码功能的网页,没有使用加密，基本效果在本文开头可看。而且，通过写这一个又学到了不少东西。(以下东西与存储无关)

小结：通过三种存储方式的特点，可以决定他们的应用场景。
1.考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录
2.localstorage可以用来存储比较大的本地数据

上一篇下一篇

猜你喜欢

热点阅读