Step 2: Setting, editing & deleting cookies

Learn how websites can set cookies, investigate what kind of information they store, and what happens when you edit or delete cookies.

Editing HTML

File Context Menu on DICE machine

We will first learn the basics of editing HTML, the language that determines the basic structure of websites. Later we will use this knowledge to set cookies on our website.

  1. Click on the link below and select "Save File" in the dialog that opens.

basic_page.htm

  1. Navigate to the folder you have saved the file in (on DICE machines, open "Places" in the top-left corner), and open it in Firefox. You should see a page which just says 'This is a very simple practice page'.
  2. Now open the file using a plain text editor like Notepad, gedit, or TextEditor. You can do this by right-clicking the file and selecting 'Open with'.  Make sure you do not use  a WYSIWYG editor like Word, Writer or Pages.
  3. You should see the HTML and Javascript code that make up the page. In particular, you should see a line saying 'This is a very simple pratice page'. Change this line to something else and save the file.
    Basic Page in Notepad
  4. Now reload the page in Firefox. You should see the text change to your new sentence.

University students and staff: learn the basics of HTML on Lynda.com

Setting a basic cookie

  1. Look at the basic_page.htm file in a text editor again. This page stores a cookie named "username" on your computer. What do you think the value of the cookie will be?
  2. Now go back to the page opened in Firefox. Click on the cookie icon in the top-right corner. You should be able to investigate the "username" cookie set by the website. Were you right about the value of the cookie?
    Firefox Storage Inspector

Storing data in cookies

  1. In Firefox, open the page below. You will be asked to enter your name once you do this.

Cookie Example

  1. The page should now display a message greeting you by name. Click on the three horizontal bars in the top-right corner and select Web Developer > Storage Inspector. This should provide you with a list of cookies cookieExample.html has stored on your computer. See how your name was stored in a cookie.
  2. Reload the page. Notice how you were not asked for your name again, because your browser had stored it in a cookie.
  3. In the Storage Inspector, double click on the value of the cookie to edit it. Change the username to something else. Reload the page and see what happens.

Deleting cookies 

Firefox also has built-in tools to delete all cookies stored in your browser.

Deleting all cookies in your personal browser

Note that if you are following this class using your personal browser, then deleting all cookies may mean that you will be signed out of websites or lose some of your settings on those websites. If you are not sure whether this is okay for you, skip this part of the class. You can still use the link below find out how to delete only selected cookies.

  1. Click on the three horizontal lines in the top right corner of your browser. From the drop down list select 'options'.
  2. Go to the 'Privacy and Security' tab and scroll down to 'Cookies and Site Data'
  3. Click on 'Clear Data' and delete all cookies, site data, and cached content.
  4. After you have done this, reload the 'Cookie Example' page. You should be prompted for your name again.

Firefox also lets you delete cookies from selected websites only. You can find out more about deleting single cookies on the Firefox help pages.

Firefox Help: Clear cookies and site data

Questions to think about

  • What could be the benefit for you of deleting cookies?
  • Remember how you could easily change the username stored in your cookie. Do you think websites actually store information like usernames or the items of your shopping cart in cookies?
    • If you are not sure, you can use Storage Inspector to check the cookies various websites set.

Going further

Learn how 'private browsing' relates to cookies.

Private Browsing